Question

我正在使用React + nextJS开发一个简单的网站。

为简单起见，假设我有2个下拉菜单。

   Dropdown A (country)
       - Dropdown B (run time options based on the country selection)

下拉菜单A位于主页上。下拉列表B是一个单独的组件。我已按如下所示设计了组件。

class MySubComponent extents Component{

    state = {
       options: []
    }

    static async getDerivedStateFromProps(props){
        let options = await axios(....);
        console.log(options)
        return {options};        
    }

    render(){
        <div>
           {this.state.options}
        </div>
    }


}

主页上的MySubComponent包括在内

<MySubComponent loadOptionBfor={dropdownAvalue} />

下拉列表A的

OnChange事件应该重新加载下拉列表B。我看到显示我获得B选项的控制台日志语句。但是，在ajax请求完成之前，将MySubComponent呈现为没有任何选项。

该如何解决？

Answer 1

getDerivedStateFromProps "should return an object to update the state, or null to update nothing"，并且只能同步执行。

我认为您最好将componentDidUpdate中的当前道具与以前的道具进行比较，如果要比较的道具发生了变化，则可以选择新的选项。

示例

class MySubComponent extends Component {
  state = {
    options: []
  };

  async componentDidUpdate(prevProps) {
    if (prevProps.country !== this.props.country) {
      let response = await axios(/* ... */);
      this.setState({ options: response.data });
    }
  }

  render() {
    return (
      <select>
        {this.state.options.map(option => (
          <option key={option} value={option}>
            {option}
          </option>
        ))}
      </select>
    );
  }
}

ReactJS-子组件中的Ajax

1 个答案: