react如何处理异步数据的传值问题？

Question

比如有个父子组件，父组件异步调用接口方法获取下拉框数据，将数据传给子组件，子组件默认选中下拉框数据的第一项；

现在父组件调用接口数据是异步的，第一次render时，会把constructor构造函数初始下拉框设置的值传到子组件，导致子组件获取的不是接口返回数据的第一条数据，如果此时在componentDidMount方法里需要将下拉框数据作为查询条件，就会出现数据问题。

想请教下，在不写死初始数据的情况下，我想到的是在父组件的constructor里同步调用接口获取下拉框数据，并初始化下拉框数据，但是constructor方法不能使用async，请求插件使用是axios。这种情况该怎么处理？

主要代码如下，代码使用antd
父组件：

const SearchForm = Form.create()(Children); //子组件Children
class App extends Component {

    constructor(props) {
        super(props)
        this.state = {
            selectData:[] // 通过接口异步获取下拉框数据，传递给子组件Children
        }
    }
    componentWillMount(){
        // 调用接口获取下拉框数据
        axios(...).then(res=>{
            this.setState({selectData:res.data.selectData})
        })
    
    }
    componentDidMount(){
        const {getFieldsValue} = this.searchForm.props.form;
        this.request(getFieldsValue());  // 按下拉框条件查询
    }
    request()=>{
        axios(...).then(res=>{
            this.setState({dataSource:res.data})
        })
    
    }
   

    render() {
        const columns = [
            {
                title:'test'
                dataIndex:'Name'
            }
        ]
        
        
        const { selectData } = this.state
        console.log(selectData); // 第一次会输出[],导致传递给SearchForm子组件的selectData为[]

        return (
            <div className="app">
                <SearchForm
                    wrappedComponentRef={(form)=>this.searchForm=form}
                    selectData={selectData} />
                <Table
                   columns={columns}
                   dataSource={this.state.dataSource}
                />
            </div>
        )
    }

}
export default Form.create(App)

子组件

export default Children App extends Component {

    constructor(props) {
        super(props)
    }

   

    render() {
 
        const { selectData } = this.props
       

        return (
            <div>
                  <Form>
                    <Form.Item>
                        {
                            getFieldDecorator(
                                'name',
                                {initiaValue:selectData[0]}
                            )(
                                <Select>
                                    selectData.map((item,index)=>(<Option key={index} value={item}>{item}</Option>))
                                </Select>
                            )
                        }
                    </Form.Item>
                  </Form>
            </div>
        )
    }

}

Answer 1

class Child extends React.Component {
  // 监听属性变化来更改 state
  static getDerivedStateFromProps(nextProps) {
    if ("selectData" in nextProps) {
      let selectData = nextProps.selectData;
      return { selectData };
    }
    return null;
  }
  
  constructor(props){
    super(props);
    this.state = {
        selectData: props.selectData || []
    }
  }
}

或者

// 父组件中, 等有数据了再加载子组件

render() {
    return (
        {selectData ? <Child /> : null}
    )
}

或者 在子组件中获取数据，通过 setState 来更新子组件