在本机反应中从数组中查找和替换键

Question

我正在尝试在平面列表中实现选中和未选中的框。

我已经检查了一个关键字。根据这个关键字，我想显示复选框（选中或未选中）

我正在尝试更新选中和取消选中的键。

但出现错误。

谁能告诉我这里出了什么问题？

这是我的代码：

updateItem(item) {
    this.setState({
      array :  ! this.array.findIndex(item => item.title === item.title).checked
    })
    this.setState({ array: [...this.array] });

}

我的数组是：

(this.array = [{title: "Option 1",checked:"false"},
      { title: "Option 2" ,checked:"false"},
      { title: "Option 3",checked:"false"},
      { title: "Option 4",checked:"false" },
      { title: "Option 5",checked:"false"}
    ])

谢谢！

Answer 1

您现在正在将数组设置为 true 或 false！

还要确保您检查的值是boolean 而不是string

this.array = [{title: "Option 1",checked:false},
      { title: "Option 2" ,checked:false},
      { title: "Option 3",checked:false},
      { title: "Option 4",checked:false },
      { title: "Option 5",checked:false}
]

此方法将映射到您的数组。如果标题匹配，它将切换选中的值，否则它将再次返回相同的对象。

updateItem = (item) => {
    this.setState({
      array: this.state.array.map(curr => {
        if(item.title === curr.title) {
         return {...curr, checked: !curr.checked}
        } else {
         return curr
        }
      })
    })
}

Answer 2

使用以下代码，

this.state.array = [{title: "Option 1",checked:false},
      { title: "Option 2" ,checked:false},
      { title: "Option 3",checked:false},
      { title: "Option 4",checked:false },
      { title: "Option 5",checked:false}
]

在您的构造函数中将 this.array 更改为 this.state.array。如果你 正在做任何其他功能，那么你必须使用 setState

在更新时，

updateItem = (item) => {
    this.setState({
      array : this.state.array.map(item => {
        if(item.title === item.title) {
         return {...item, checked: !item.checked};
        } else {
         return { ...item, checked: false }; // if you want only one checked
         // return item; if multiple checks if fine.
        }
      })
    })
}