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

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

0 голосов
/ 21 октября 2018

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

Ответы [ 2 ]

0 голосов
/ 21 октября 2018

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

0 голосов
/ 21 октября 2018

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