antd踩坑记录

1.select的option是异步获取的，设置默认值显示问题

一开始直接在getFieldDecorator里加了initialValue这个属性。但是发现了问题，由于options是异步获取的，在<Select>渲染出来之后，显示的并不是我设置的defaultValue对应的defaultLabel，而是value，在options异步获取到之后，又重新渲染为label，看起来很奇怪。于是把initialValue直接设置成defaultLabel，这样显示没问题，但是保存的时候会出错因为取的值应该是value。

          <Form.Item>
            {getFieldDecorator(id, {
              rules: [...],
              // initialValue: defaultValue
            })(
              <Select>
                {options.map(
                  (option) => (
                    <Select.Option key={option.value} value={option.value}>
                      {option.label}
                    </Select.Option>
                  )
                )}
              </Select>
            )}
          </Form.Item>

解决方法：在options获取到之后，使用setFieldsValue设置默认值

useEffect(() => {
   if (!!options) {
      setFieldsValue(...)
   }
},[options])

2.form显示后端校验返回的错误
自定义的validator(rule, value, callback)虽然也能实现异步校验，但感觉更像是专门校验某一个字段的接口，只要传这一个字段的值就行了。如果是提交所有表单数据给后端，后端统一校验，这种方式就感觉不太适合。

解决方法：使用help, validateStatus自定义校验状态和提示语
当后端返回错误时，更新error，就能实现错误提示，并且和前端定义的rules不冲突

          const [error, setError] = useState()
          ...
          <Form.Item
               help={error ? error.help : undefined}
               validateStatus={error ? error.validateStatus : undefined}
          >
            {getFieldDecorator(id, {
              rules: [...],
            })(
              <Select>
                ......
              </Select>
            )}
          </Form.Item>

3.被getFieldDecorator包裹的组件不显示默认值

          <Form.Item>
            {getFieldDecorator(id, {
              rules: [...],
              initialValue: defaultValue
            })(
              <CustomSelect>
                ...
              </CustomSelect>
            )}
          </Form.Item>

如果包裹的是antd的组件，默认值显示没问题。如果是自己又封装了一层组件，就不显示默认值，但通过getFieldValue能得到默认值，说明默认值传进了组件，只是没显示。搜索了半天，终于找到了一个经验贴。

解决：getFieldDecorator里设置默认值，同时也要给CustomSelect包裹的Select设置defaultValue，两个默认值保持一致，能正常显示