ReactJS

Question

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

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

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

下拉菜单 A 在主页上。下拉 B 是一个单独的 component.I 设计了我的组件，如图所示。

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 在子组件中

ReactJS - Ajax in the sub component

javascript

next.js