Question

我是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

Answer 1

你可以在一个事件处理程序中多次setState this.state可以在setState之后异步更新。

来自documentation

setState（）并不总是立即更新组件。有可能批量或推迟更新，直到稍后。这使得阅读this.state 在调用setState（）之后发生了潜在的陷阱。相反，使用 componentDidUpdate或setState回调（setState（更新程序，回调）），其中任何一个都保证在更新后触发已经应用。如果需要根据以前的状态设置状态 state，请阅读下面的updater参数。

setState的行为如下：

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

因此，如果你在一个事件处理程序中多次setState，你可能无法获得你希望得到的结果：

//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));

Answer 2

在setState方法中使用 spread operator (...) 来更新多个状态字段，如下所示

我的状态是

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

我正在更新

this.setState(
  {...this.state, 
   fields:{name:'', email: '', message: ''}, 
   disabled: false
});

如何使用Immutability Helper更新多个状态反应JS

2 个答案: