Reactjs: получение / сохранение данных формы redux при обновлении страницы

В React я пытаюсь выполнить вызов обновления API, используя redux-form. Я могу получать данные в форме редактирования с помощью initialize. Это работает хорошо. Если пользователь не обновит браузер. В этом случае я не могу получить данные в initialize, поскольку они недоступны в реквизитах / состояниях.

constructor(props){
  super(props);
}

 componentWillMount(){
    this.props.fetchUser(this.props.params.id);
 }

render() {
 const InitlValues = {
  initialValues: {
    "name": this.props.user.name,
    "city": this.props.user.city
  }
}
const { handleSubmit } = this.props;
return(
  <form goes here..>
);

Я пробовал использовать метод жизненного цикла React componentWillMount для получения данных, но, похоже, он не работает.

когда пользователь обновляет браузер, выдает ошибку:

Uncaught TypeError: Невозможно прочитать свойство 'name', равное null

Как мне обойтись без извлечения / сохранения данных, когда пользователь обновляет страницу?


reactjs react-redux redux-form react-redux-form
person s develop    schedule 08.04.2017    source источник

Ответы (2)


arrow_upward
0
arrow_downward

На самом деле это не проблема, связанная с редукцией, это общая проблема с поддержанием состояния приложения при обновлении в одностраничном приложении. С помощью redux вы можете сохранить состояние, которое необходимо сохранить при обновлении в localStorage - в данном случае состояние формы. Вы можете сделать это «вручную», создав промежуточное программное обеспечение redux, или вот это : https://github.com/elgerlambert/redux-localstorage

person Andy_D    schedule 08.04.2017

arrow_upward
0
arrow_downward

Чтобы действительно избежать Uncaught TypeError: Cannot read property 'name' of null, вам необходимо определить defaultProps для вашего класса / компонента.

Что именно здесь происходит, так это то, что поскольку ваше действие API является асинхронным и требует времени для получения данных, this.props.user возвращает undefined, что, в свою очередь, заставляет this.props.user.name выбросить Uncaught TypeError.

Попробуйте что-то вроде этого:

static defaultProps = {
 user: { name: '', city: '' }
}

constructor(props){
  super(props);
}

 componentWillMount(){
    this.props.fetchUser(this.props.params.id);
 }

render() {
 const InitlValues = {
  initialValues: {
    "name": this.props.user.name,
    "city": this.props.user.city
  }
}
const { handleSubmit } = this.props;
return(
  <form goes here..>
);

PS: если вы действительно хотите сохранить свое состояние redux, вы должны использовать Redux Middleware для хранения части вашего состояния в локальном хранилище или хранилище сеансов. Подробнее об использовании промежуточного программного обеспечения от самого создателя redux: Создание приложений React с Idiomatic Redux

person shobhit1    schedule 08.04.2017
comment
привет спасибо за предложение. Я пробовал defaultProps, но по-прежнему выдает ту же ошибку .. - person s develop; 10.04.2017