На странице перезагрузка реквизита в нулевом значении при использовании реагирующего маршрутизатора

У меня есть основной компонент под названием 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. Почему реквизит не передается этому компоненту при обновлении страницы??


reactjs javascript react-router-dom react-router react-router-v4
person Jude Fernandes    schedule 21.10.2018    source источник
comment
это нормально если вы перезайдёте на страницу this.state станет равно {}   -  person evgeni fotia    schedule 21.10.2018
comment
@evgenifotia согласился, состояние будет нулевым при перезагрузке, но это не состояние, я передаю состояние компонента body в качестве реквизита для компонента UserDetails, мой вопрос в том, почему реквизиты в UserDetails являются нулевыми при перезагрузке страницы.   -  person Jude Fernandes    schedule 21.10.2018
comment
потому что новое состояние ведьмы будет {} вот что будет передано. вы можете проверить это в UserDetails, он вернет undefined, потому что внутри состояния нет user   -  person evgeni fotia    schedule 21.10.2018

Ответы (2)


arrow_upward
0
arrow_downward

Проблема в том, что в обычном потоке вы можете передавать данные из маршрутов в другие маршруты, но при обновлении весь компонент перемонтируется, и, следовательно, состояние повторно инициализируется до пустого. Для таких случаев вы можете сохранить значения в 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);
person Shubham Khatri    schedule 21.10.2018

arrow_upward
0
arrow_downward

если ваше приложение растет дальше, как корпоративное приложение, Redux — очень хороший вариант для решения всех проблем, связанных с состоянием, когда localstorage не предоставляет эти функции. Найдите ссылку ниже https://redux.js.org/. С Redux и React вы можете легко обрабатывать изменения состояния, используя методы mapStatetoProps и mapDispatchToProps. Один из хороших примеров контейнеров с реакцией, редукс https://www.thegreatcodeadventure.com/the-react-plus-redux-container-pattern

person Test Mail    schedule 21.10.2018