更新時反應對嵌套狀態項的引用

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 });