Question

我有一个React组件，可以显示来自API的数据。目前，我正在ComponentDidMount上进行此Ajax调用，如here所述。

在同一组件的下拉列表中发生选择更改时，如何重新触发数据提取，因为状态更新不会触发ComponentDidMount？

谢谢

Answer 1

使用componentDidUpdate

反应文档https://reactjs.org/docs/react-component.html#componentdidupdate：

componentDidUpdate（）在更新发生后立即被调用。初始渲染未调用此方法。

使用此机会在组件更新后在DOM上进行操作。只要您将当前的道具与以前的道具进行比较，这也是一个进行网络请求的好地方（例如，如果道具未更改，则可能不需要网络请求）。

componentDidUpdate(prevProps) {
  // Typical usage (don't forget to compare props):
  if (this.props.selectedMenuItem !== prevProps.selectedMenuItem) {
    this.fetchData(this.props.userID);
  }
}

Answer 2

如果要重新渲染组件，则必须在componentDidMount（）中获取数据后才能设置setState。例如：

componentDidMount(){
const options = fetch( ...); //store your data here
this.setState({options})
}

在组件中，您可以使用状态填充数据：

例如您的下拉按钮：

export default class OutlineButton extends React.Component {
render() {
return (

      <ButtonDropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
        <DropdownToggle size = 'md' color='#58b7e6' caret className={styles.button} > {this.state.name}</DropdownToggle>
        <DropdownMenu className={styles.drowDownButton} styles={{}}>
          {this.state.options.map((option, i) => (
            <DropdownItem key={i} onClick={this.handleClick} value={option}>
              {option}
            </DropdownItem>
          ))}
        </DropdownMenu>
      </ButtonDropdown>
    );
  }
}

上面的代码使用reactstrap

Answer 3

如果您不想使用React生命周期方法，则可以使用一个函数来触发AJAX提取请求，例如：

protoc

这将作为回调函数传递到DropDown组件上的handleSelectionChange = () { this.fetchData(this.state.selectedOption); }方法属性。

如何在子组件中重新填充数据？

3 个答案: