设置 React 状态时如何更改对象数组中的属性？

Question

我有一个愚蠢的问题，如果有人可以提供帮助，我将不胜感激。我有一个对象数组：

weekDays: [
    {label: 'Sun', checked: false},
    {label: 'Mon', checked: false}, 
    {label: 'Tue', checked: false},
    {label: 'Wed', checked: false},
    {label: 'Thu', checked: false},
    {label: 'Fri', checked: false},
    {label: 'Sat', checked: false}]

它们将是复选框。单击复选框后，我必须检查赋予该 input 的值并更改 checked 值。

这是我想出的：

handleCheckBox = (e) => {
    console.log(e.target.value); //show value just right
    this.setState((previousState) => ({
      weekDays: previousState.weekDays.map(item => item.label === e.target.value 
        ? Object.assign(item, {checked: !item.checked}) 
        : item)
    }));

但是出现了这个错误：无法读取 null 的属性“值”。 即使当我 console.log 这个值它显示的值恰到好处。

有没有人知道怎么弄？

Answer 1

如果你使用 setState 作为第一个参数，你可以缓存你需要的值：

handleCheckBox = (e) => {
console.log(e.target.value); //show value just right
const value = e.target.value; // our cache

this.setState((previousState) => ({
  // now we'll use cached value
  weekDays: previousState.weekDays.map(item => item.label === value 
    ? Object.assign(item, {checked: !item.checked}) 
    : item)
}));