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}]

，它们将成为复选框。单击复选框后，我必须检查为该输入提供的值，并更改选中的值。

这是我想出的：

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

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

1 个答案: