Question

我有一个名为Body的主要组件

class Body extends React.Component {
  state = {};

  _redirect = data => {
    this.setState(
      {
        user: data
      },
      () => this.props.history.push("/user_details")
    );
  };

  render() {
    return (
      <Switch>
        <Route
          path="/users"
          render={() => <UserList onRedirect={this._redirect} />}
        />
        <Route
          path="/user_details"
          render={() => <UserDetails user={this.state.user} />}
        /> 
      </Switch>
    );
  }
}

export default withRouter(Body);

基本上，有一个页面在用户访问/users时加载，该页面包含一个用户列表，该页面中有一个按钮，单击该按钮后，将调用_redirect作为上面显示的回调。

在重定向功能中，数据被保存到状态并传递到UserDetails组件，并且url更改为/user_details，并且所有功能在首次运行时都运行良好。

现在，此后，当我尝试重新加载/user_details页面时，由于某种原因该页面未收到user props。为什么道具在页面刷新时不传递给该组件？

Answer 1

问题在于，您可以在正常的流中将数据从Routes内部传递到其他Routes，但是在刷新时，enitre组件将重新安装，因此状态将重新初始化为空。在这种情况下，您可以将值保存在localStorage中，然后在构造器中重新填充状态

class Body extends React.Component {

    constructor() {
      super();
      const data = localStorage.getItem('data');
      this.state = {
         data: data ? JSON.parse(data) : null
      };
    }

  _redirect = data => {
    localStorage.setItem('data', JSON.stringify(data));
    this.setState(
      {
        user: data
      },
      () => this.props.history.push("/user_details")
    );
  };

  render() {
    return (
      <Switch>
        <Route
          path="/users"
          render={() => <UserList onRedirect={this._redirect} />}
        />
        <Route
          path="/user_details"
          render={() => <UserDetails user={this.state.user} />}
        /> 
      </Switch>
    );
  }
}

export default withRouter(Body);

Answer 2

如果您的应用程序像企业应用程序一样进一步发展， Redux 是处理本地存储不提供这些功能的所有状态相关问题的很好选择。请在下面找到链接 https://redux.js.org/。使用Redux和React，您可以使用mapStatetoProps和mapDispatchToProps方法轻松处理状态更改。具有react，redux的容器的好例子之一 https://www.thegreatcodeadventure.com/the-react-plus-redux-container-pattern

使用React Router时在页面上重新加载道具为null

2 个答案: