antd踩坑记录 第一篇

[zp1112]

本系列用于记录此次开发中后台项目中遇到的奇葩、诡异、魔法的坑。使用的依赖版本为：

"antd": "3.7.0",
"react": "^16.4.1",
"react-dom": "^16.2.0",
"react-redux": "^5.0.7",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",

下拉列表TreeSelect

坑：在使用该组件的时候，下拉数据异步获取，那么，初始值无效

示例

以下代码是一个通用的下拉组件，作为form.getFieldDecorator函数包装的控件。

export default class ProductClasses extends React.PureComponent {

    constructor(props) {
        super(props);
        this.state = {
          productClasses: [],
        };
    }

    async componentDidMount() {
      const result = await queryListTree();
      this.setState({
        productClasses: result.data,
      })
    }

    render() {
      const { productClasses } = this.state;
      const { labelInValue, prop, form } = this.props;
        return  <TreeSelect
            defaultValue={form.getFieldsValue([prop])[prop]}
            onChange={(e) => form.setFieldsValue({
              [prop]: e,
            })}
            labelInValue={labelInValue}
            placeholder="请选择产品类型"
            dropdownStyle={{maxHeight: 300}}
            allowClear
            style={{ width: 200 }}
          >
            {makeTreeDom(productClasses)}
          </TreeSelect>
    }
}

以上代码并不能在赋予初始值的时候正常显示初始值，必须使用一个三元运算符，将return改为如下才能生效

return productClasses.length ? (
          <TreeSelect
            defaultValue={form.getFieldsValue([prop])[prop]}
            onChange={(e) => form.setFieldsValue({
              [prop]: e,
            })}
            labelInValue={labelInValue}
            placeholder="请选择产品类型"
            dropdownStyle={{maxHeight: 300}}
            allowClear
            style={{ width: 200 }}
          >
            {makeTreeDom(productClasses)}
          </TreeSelect>
) : null