javascript - 如何正确更新 react 状态

Question

我是 react 新手，我想问更新状态的最佳方法是什么，我有一些代码。我知道下面的代码不正确，因为它直接设置状态。

handlexxx = foo => { 
  const foos = [...this.state.foos]; 
  const index = foos.indexOf(foo); 
  foos[index].bar = !foo.bar; 
  this.setState({ foos }); 
};

下面这两个代码哪一个更好？有人可以帮我解释一下吗!

handlexxx = foo => { 
  const foos = [...this.state.foos]; 
  const index = foos.indexOf(foo); 
  foos[index] = { ...foo }; 
  foos[index].bar = !foo.bar; 
  this.setState({ foos }); 
};

handlexxx = foo => { 
  const foos = [...this.state.foos];
  const index = foos.indexOf(foo); 
  foos[index] = { ...foos[index] };
  foos[index].bar = !foos[index].bar;
  this.setState({ foos }); 
};

我的帐户被一些否决票问题阻止了，有趣的是我必须重新编辑它们，即使我已经有了接受的答案。我不明白这样做有什么意义。我很沮丧这个 stackoverflow 系统。

现在，我基本上什么也做不了，只能继续编辑我的问题，而且都已经得到解答了。这太荒谬了!!!

Answer 1

您应该使用Array.prototype.map()方法，如下所示:

handlexxx = foo => { 
  const foos = this.state.foos.map(f => {
    if(foo.id === f.id) return {...f, bar: !f.bar};   // assume that the element has an identifier id
    return f;
  })
  this.setState({ foos }); 
};

简单来说，使用三元运算符代替if-else语句

handlexxx = foo => { 
  const foos = this.state.foos.map(f => foo.id === f.id ? {...f, bar: !f.bar} : f
  this.setState({ foos }); 
};