Question

目标：

在React App中，了解如何正确更新状态下存储在数组中的布尔值。

问题：

我不确定我的代码是否正确以避免异步错误（在这种情况下它是否有效，我不感兴趣，因为我的目标是了解如何在所有情况下避免这些错误）。为了正确创建新状态，是否缺少某些语法？

上下文：

在React中创建一个待办事项列表。
我的状态由一个标记为itemsArr的数组组成，每个数组元素都是一个对象
对象使用以下格式初始化：
- { complete : false, item : "user entered string", id : uuid(), }
点击订单项后，我正在调用函数handleComplete，以通过切换complete : false/true来删除该行的文本
该函数正在通过以下方式更新状态：

    handleComplete(id){
      this.setState(state => 
        state.itemsArr.map(obj => obj.id === id ? obj.complete = !obj.complete : '')
      )
    }

其他详细信息：

我的尝试之一（无效）：

    handleComplete(id){
      const newItemsArr = this.state.itemsArr.map(obj => 
         obj.id === id ? obj.complete = !obj.complete : obj);
      this.setState({ itemsArr : newItemsArr })
    }

Answer 1

在两个代码段中，您都没有从.map回调中正确返回新对象：

 handleComplete(id){
  const newItemsArr = this.state.itemsArr.map(obj => 
     obj.id === id ? { id: obj.id, complete: !obj.complete } : obj);
  this.setState({ itemsArr : newItemsArr });
}

Answer 2

如上所述，您的函数通过在状态中添加新元素而不是更新当前数组来返回并更新错误数据。

由于array.map（）返回一个数组，因此您可以将其分配给状态数组itemsArr。

您还应该通过以下方式替换更改条件：先更新元素的值，然后返回它（如果其ID匹配），否则，只需将其保留原样即可。

handleComplete=(id)=>{
      this.setState(state =>{
        itemsArr:state.itemsArr.map(obj => obj.id === id 
                                 ? (obj.complete = !obj.complete,obj) //update element's complete status and then return it
                                 : obj) //return element as is
      },()=>console.log(this.state.itemsArr)) //check new state
    }

使用数据的实时示例：https://codepen.io/Kalovelo/pen/KKwyMGe

希望有帮助！

Answer 3

state = {
    itemsArr: [
        {
            complete: false,
            item: 'iemName',
            id: 1
        },
        {
            complete: false,
            item: 'iemName',
            id: 2
        }
    ]
}

handleComplete = (id) => {
   let { itemsArr } = { ...this.state };
   itemIndex = itemsArr.findIndex(item => id === item.id);
   itemsArr[itemIndex]['complete'] = !itemsArr[itemIndex]['complete'];
   this.setState{itemsArr}
}

在反应状态数组中更新布尔值

3 个答案: