更新时对嵌套状态项的引用

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来更新它？

我是否必须搜索品牌以找到具有匹配键的那个，然后搜索该品​​牌中的汽车以找到具有匹配的CarKey的汽车，然后用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 });