时间戳

首页 > 解决方案 > 如何将变异状态传递到不同的页面？

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

问题描述

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

        <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）？

标签： javascriptreactjsreact-router

解决方案

您需要使用生命周期方法来获取组件的道具以等待调用的道具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 调用或其他内容，您可以使用setState callback. 这将在componentDidUpdate lifecycle method.

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

推荐阅读