如何将变异状态传递到不同的页面？答案

【问题标题】：How to pass a mutated state to a different page?如何将变异状态传递到不同的页面？
【发布时间】：2019-08-30 19:53:27
【问题描述】：

在我的 App.js 中，我正在创建一个这样的路由：

        <Route 
          exact path='/tools/ndalink'
          render={(props) => (
            <React.Fragment>
              <Header />
              <LinkPage {...props} brokerID={this.state.brokerID}></LinkPage>
            </React.Fragment>
          )}
        />

state.brokerID 最初是“”，但不久之后发生了变化，因此 LinkPage 将 this.state.brokerID 接收为“”。

如何传递更改后的 state.brokerID（不使用 Redux）？

【问题讨论】：

标签： javascript reactjs react-router

【解决方案1】：

您需要使用生命周期方法来获取组件的道具以等待名为componentDidUpdate 的道具。

话虽如此，如果你打算改变brokerId，你只需要使用它。

由于该过程是异步的，因此您必须等待道具被传递下来。直到您可以显示loading 文本或进度条。

class LinkPage extends React.Component {

  state = {
    builderId: ''
  };

  componentDidUpdate(prevProps) {
    if(this.props.builderId !== prevProps.brokerId) {
      this.setState({ builderId: this.props.brokerId });
    }
  }

  render() {
    return (
      <div className="App">
        <h1>{ this.state.builderId ? this.state.builderId : 'Loading' }</h1>

      </div>
    );
  }
}

或者，一个简单的方法是根本不使用生命周期方法，在渲染中更改以下行，它应该可以工作：

<h1>{ this.props.builderId ? this.props.builderId : 'Loading' }</h1>

如果你需要使用这个brokerId进行api调用什么的，你可以使用setStatecallback。这在componentDidUpdate lifecycle method.中会是这样的

 componentDidUpdate(prevProps) {
    if(this.props.builderId !== prevProps.builderId) {
      this.setState({ builderId: this.props.builderId }, () => {
        //use this.state.brokerIdhere 
      });

【讨论】：