Как обновить несколько состояний с помощью Immutability Helper |Реагировать JS - PullRequest
Новая
       99

Как обновить несколько состояний с помощью Immutability Helper |Реагировать JS

0 голосов
/ 25 мая 2018

Я новичок в библиотеке Immutability Helper React и пытаюсь обновить несколько значений состояния одновременно, но обновляется только состояние последнего вызывающего метода.

это то, что я пытался: 

state : {l0: null, l1: null}
updateL0 = (l0) => {
    if(l0){
      this.setState(
        update(this.state, {
          l0: { $set: l0 }
        })
      );
    }
  };
  updateL1 = (l1) => {
    if(l1){
      this.setState(
        update(this.state, {
          l1: { $set: l1 }
        })
      );
    }
  };

Current Output: l1: null, l2: Expected Value

Expected Output: l1: Expected Value , l2: Expected Value

Ответы [ 2 ]

0 голосов
/ 04 ноября 2018

используйте spread operator (...) в методе setState для обновления нескольких полей состояния следующим образом

мое состояние 

this.state ={
       fields: {
         name:'',
         email: '',
         message: ''
       },
       errors: {},
       disabled : false
}

я обновляю 

this.setState(
  {...this.state, 
   fields:{name:'', email: '', message: ''}, 
   disabled: false
});
0 голосов
/ 25 мая 2018

Вы не можете установить setState несколько раз в одном обработчике события this.state может обновляться асинхронно после setState.

Из документации

setState () не всегда сразу обновляет компонент.Это может пакетировать или отложить обновление до позже.Это делает чтение this.state сразу после вызова setState () потенциальной ловушкой.Вместо этого используйте componentDidUpdate или обратный вызов setState (setState (Updater, callback)), который гарантированно сработает после применения обновления.Если вам нужно установить состояние на основе предыдущего состояния, прочитайте об аргументе средства обновления ниже.

setState будет вести себя так: 

//sate is {name:"Ben",age:22}
this.setState({...this.state,age:23});
console.log(this.state.age);//will log 22

Так что, если вы установилиState несколько разв одном обработчике событий вы, скорее всего, не получите ожидаемый результат: 

//sate is {name:"Ben",age:22}
this.setState({...this.state,age:23});
console.log(this.state.age);//will log 22
this.setState({...this.state,name:"Harry"});//age will still be 22

Лучшее решение этой проблемы - не использовать обратный вызов, а писать свои функции как чистые функции (без побочных эффектов, таких как setState).), передайте состояние вашим функциям и попросите их вернуть новое состояние: 

updateL0 = (state,l0) => {
  if(l0){
    return update(
      state,
      {
        l0: { $set: l0 }
      }
    );
  }
  return state;
};
updateL1 = (state,l1) => {
  if(l1){
    return update(
      state, 
      {
        l1: { $set: l1 }
      }
    );
  }
  return state;
};
//when you call it you can do:
const newState = updateL0(this.state,L0);
this.setState(updateL1(newState,L1));//note that I'm passing newState here
//or you can just nest updateL1 and updateL0
this.setState(updateL1(updateL0(this.state,L0),L1));
...