Question

this.state = {
  myArray = [
    {
    name:"cat",
    expand:false
    }
  ]
}

clickItem(item){
 item.expand = true;
 this.setState({})
}

this.state.myArray.map((item) =>{
 return <div onClick={()=>this.clickItem(item)}>{item.name}</div>
})

在React中，我有一个简单的对象数组，

当我单击这些对象之一时，我想更改其道具并更新状态，这样做的正确方法是什么。

我觉得有更好的方法

Answer 1

您需要复制状态，更新复制的状态并设置状态。

this.state = {
  myArray = [
    {
    name:"cat",
    expand:false
    }
  ]
}

clickItem(key){
 let items = this.state.myArray;
 items[key].expand = true;
 this.setState({items})
}

this.state.myArray.map((key, item) =>{
 return <div onClick={()=>this.clickItem(key)}>{item.name}</div>
})

Answer 2

好，有几件事。

您正在直接更改状态，这将无声地失败，并且您还缺少key上的<div道具。

通过使用可用的数据可以轻松解决此问题。我不知道每个name是否唯一，但是您可以将其用作key。这有助于React确定状态更改时实际更新的DOM元素。

要更新状态下的商品，您需要一种在状态内原始查找商品的方法，因此，如果name是唯一的，则可以使用Array.prototype.find对其进行更新。

clickItem(item) {
  const targetIndex = this.state.items.find(stateItem => stateItem.name === item.name)

if (targetIndex === -1)
  // Handle not finding the element 

const target = this.state.items[targetIndex]

target.expand = !target.expand // Toggle instead of setting so double clicking works as expected.

this.setState({
  items: this.state.items.splice(targetIndex, 1, target) // This replaces 1 item in the target array with the new one.
})
}

这将更新状态并重新渲染您的应用。该代码未经测试，但可以正常工作。

如何在React中正确更改数组内部对象的属性

2 个答案: