如何在 React 中使用 useState Hook 更新嵌套数组

Question

我收到错误消息[类型转换表达式应该用括号括起来] 不知道如何更新useState中的嵌套数组。

let tempArray = [
  {
    filterType: "Company",
    dataList: []
  },
  {
    filterType: "Vehicle",
    dataList: ["Car", "Bike"]
  }
]

const [resultList, setResultList] = useState(tempArray)
const [indexChange, setIndexChange] = useState(0)

// Assume here I am using fetch request and getting the response.
if (responseJson.success) {
  setResultList(
    [
      ...resultList, 
      resultList[indexChange].dataList: responseJson.data
    ]
  )
}

这里我正在渲染我的结果数组。点击列表时！根据索引，变化反映。

<div className='filterTypeContainer' style={{ backgroundColor: "#F5F6F8", padding: "20px 20px", fontSize: 14, width: "40%" }}>
  { resultList.map((list, index) => { 
  return <div className='filerType' onClick={()=> setIndexChange(index)}>
    <p>{list.filterType}</p>
  </div>
  }) }
</div>

Answer 1

您使用的方法称为展开运算符 ...value。在这种情况下，它会将原始状态中的所有项目放入一个新数组中。

使用扩展运算符创建数组的副本。这可以防止突变到原始状态。然后访问数组中要更新的索引和 return 复制和更新的状态。

if (responseJson.success) {
  setResultList(resultList => {
    const copy = [...resultList]
    copy[indexChange].dataList = response.data
    return copy
  }
}

或者，您可以使用 .map 方法循环状态和 return 基于索引的更新对象。

if (responseJson.success) {
  setResultList(resultList => resultList.map((item, index) =>
    index === indexChange ? ({
      ...item,
      dataList: responseJson.data
    }) : item
  );
}

如何在 React 中使用 useState Hook 更新嵌套数组

How to update the nested array using useState Hook in React

javascript

arrays

array-map

reactjs

use-state