如何将变异状态传递到其他页面？

Question

In my App.js, I'm creating a Route as such:

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

state.brokerID is initially "", but changed shortly after, therefore LinkPage receives this.state.brokerID as "".

How can I pass the changed state.brokerID (without using Redux)?

Answer 1

You need to use a lifecycle method to get the props to the component to wait for the props called componentDidUpdate .

That being said, you only have to use this if you plan to mutate the brokerId .

Since the process is async you'll have to wait for the props to be passed down. Until the you can show a loading text or progess bar.

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>
    );
  }
}

Or, a simple method would be to not use the lifecycle method at all, Change the following line in render and it should work:

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

If you need to use this brokerId for an api call or something, you can use the setState callback . This would go something like this in the componentDidUpdate lifecycle method.

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