更新时对嵌套状态项的引用做出反应

Question

我的state 看起来像这样：

brands:[{key:'0', cars:[]}, {key:'2', cars:[]}, {key:'3', cars:[]}]

每个car 数组的格式为：

[{key:'0', color:'Red', detail:''}, {key:'1', color:'Green', detail:''}]

我将每个品牌列表映射到一个组件<Brand cars={brand.cars}>

每个品牌将其汽车映射到：

<Car color={car.color} detail:"" fetchDetailCallback={this.carDetailCallback}>

单击汽车时，会在父级上调用 fetchDetailCallback 回调，从我的数据库中获取有关汽车的更多详细信息。

然后如何更新状态以填写这些详细信息？

function carDetailCallback(brandKey, carKey){
   //fetch detail from database code here

   this.setState({brands[brandKey][carKey]: detail})
}

当然this.setState({'sentences'[brandKey][carKey]: detail}) 不起作用，因为键不是真正的键，它们是数组中名称-值对的名称。

我应该如何在状态中引用正确的Car 以更新它？

我是否必须在 Brands 中搜索以找到具有匹配 Key 的汽车，然后在该 Brand 中搜索 Cars 以找到具有匹配 CarKey 的汽车，然后将整个 Brand 替换为 this.setState() 一次我更新它？这似乎是更新状态值的漫长道路。

Answer 1

您可以使用Array.prototype.find() 获取特定品牌和汽车对象，使用Array.prototype.findIndex() 查找要更新的项目的索引。

示例

const data = { brands:[{key:'0', cars:[{key:'0', color:'Red', detail:''}, {key:'1', color:'Green', detail:''}]}, {key:'2', cars:[{key:'0', color:'Red', detail:''}, {key:'1', color:'Green', detail:''}]}] };

const brand = data.brands.find((brand) => brand.key === brandKey);
const car = brand.cars.find((car) => car.key === carKey);

const brandIndex = data.brands.findIndex((brand) => brand.key === brandKey);
const carIndex = brand.cars.findIndex((car) => car.key === carKey);

this.setState({ brands[brandIndex][carIndex]['details']: details });