Ant-Design-Pro

Version： 3.10.8

1. Q & A
  - 1.1. model in @connect() is undefined
  - 1.2. console report error Unexpected token ... in Json ... with correct response.
1. custom styles doesn’t work

1. Q & A

1.1. model in @connect() is undefined

The possible reason is that you use model defined in another page. As ant-design-pro use umi-plugin-react, so this would cause undefined problem.

package.json

"devDependencies": {
    "umi-plugin-react": "^1.2.4"
}

According to guide：

There are two types of models: the globally registered (global) model, and the page-level model.

The global model should be defined in /src/models/, and can be referenced in all other pages.

The page-level model should not be used in any other page.

So if you use model defined in another page, you will got undefined problem.

Example

+ src
  + pages
    + a
      + models
        a.js
    + b
      b_page.js  // here you connect model defined in a.js, you will got undefined problem.

1.2. console report error `Unexpected token ... in Json ...` with correct response.

If you are ensure your response is correct, you may need to check the type of your response, console will report error when response type is not json and cannot convert response body to json.

This is because request.js handle response like following：

return fetch(url, newOptions)
.then(checkStatus)
.then(response => cachedSave(response, hashcode))
.then(response => {
  // DELETE and 204 do not return data by default
  // using .json will report an error.
  if (newOptions.method === 'DELETE' || response.status === 204) {
    return response.text();
  }
  return response.json();
})

So if not DELETE method or status code is not 204, all response will be converted to json. that’s the reason console reporting error.

2. custom styles doesn’t work

When we defined our custom styles, sometime we found they doesn’t work. the possible reason maybe your styles are override by ant design default styles.

example.less

.title {
  color: @heading-color;
  font-weight: 600;
  margin-bottom: 16px;
}

But when you check styles by Web Developer tools, you may found attributes are override by other style, such as ant-form, you should change your styles like following: