Question

好的，这导致我出现问题-可能这不是您可以做出的反应，但我希望您可以。

我有一个从api返回的场所列表，这些场所已映射到父组件状态下的数组：

this.state = {
      venues : []
}

除了映射会场名称，ID等外，还会将布尔值设置为false来映射“ selected”的附加属性。

此功能运行良好。

this.state.venues然后作为道具发送到子组件“ Venues”，该子组件将每组场所数据映射到一个名为“ VenueItems”的子组件的实例，因此，例如，如果返回在四个地点，我们最终得到四个VenueItems.js实例，每个实例都包含名称，id，描述和'selected'属性，但仍设置为false。

“ VenueItems”还包含一个clickable元素和一个click处理程序，该处理程序将与该特定场所对象/实例相关联的特定数据返回到父组件App.js。此功能也可以正常工作。

当它返回到父组件时，我想将该特定场所的“ selected”属性更改为true（这样的想法是，将针对该场所呈现更多详细信息）... 这就是我遇到问题的地方。我已经在How to update a nested state in React处提到了答案，这很好，但不允许在对象的中间导航数组爆炸（！）

到目前为止（在父组件中）我能提出的最好的建议是-其中“地点”是点击处理程序针对特定地点返回的数据：

 populateSelectedVenue = (venue) => { 
    this.state.venues.forEach(item => {

`      this.setState(prevState => ({
        ...prevState,
        venues: {
          ...prevState.venues,
           item: {
            ...prevState.venues.item.selected: false
           }
        }
      })`

    });
}

...但是，这并不能帮助我。更烦人的是，它没有抛出任何明显的console.errors我可以使用的错误-它只是没有填充“ selected”属性。我怀疑“项目”没有被接受为树的一部分，但我不知道该如何解决……任何想法的人？预先感谢。

“地点”参数是来自该地点的数据。以某种方式将用于识别应该选择添加到该实例的实例。

简而言之，

*，这里的问题是如何遍历嵌套在this.state中的数组并在其中一次迭代中更改属性之一*

遍历嵌套状态并更新项目

0 个答案: