我可以在循环中初始化 useState 吗？

Question

我使用一个 React 模块来管理电子表格的使用：反应电子表格 https://github.com/iddan/react-spreadsheet/

在我的项目中，我需要几个电子表格，因此需要几个用户可以动态添加、修改、删除的表格

一开始，我想使用一个大的 useState 变量，其中数据数组将以以下形式集中：stateData = [ [...arrays], [...arrays...] ]

但是，当我的 stateData 变量包含不同的数组时，使用 OnChange 函数将 setData 作为值的模块似乎出现错误。

<Spreadsheet key={index} className='table' columnLabels={stringLabelCol} rowLabels={stringLabelRow} data={stateData[index]} onChange={setData}  />

由于我无法使用此模块在一个 UseState 中管理所有内容，是否可以在循环内创建一系列 UseState？

在我看来这是一种不好的做法，但我真的被阻止了感谢您阅读我的文字...：/

Answer 1

看到你的代码和评论，我假设：

您有一个名为 data 的 useState，其中包含您的所有数据
您有多个价差sheets
对于每个点差sheet，您想要传递更新它的 sheetData 和 onChange

您的代码中的问题在于您正在设置 onChange={setData}，这意味着任何更改都将覆盖整个数据对象，而不仅仅是目标索引。

你想要做的是让你的 onChange 函数成为一个只更新你状态的正确部分的函数。所以你会这样做：

const [data, setData] = useState([])

const updateSheetData = (index, sheetData) => {
  // We clone the current state
  const tempData = [...data]
  // We update the right index
  tempData[index] = sheetData
  // This is now the new state
  setData(tempData)
}

//...
// the onChange function for our component will use our custom function
<Spreadsheet 
  key={index} 
  className='table' 
  columnLabels={stringLabelCol} 
  rowLabels={stringLabelRow} 
  data={stateData[index]} 
  onChange={(newData) => updateSheetData(index, newData)}  
/>

然后，每当您添加新的 sheet 或删除 sheet 时，您还必须正确更新 data 状态，以确保索引已更新。但是思路是一样的

我可以在循环中初始化 useState 吗？

Can I initialize a useState in a loop?

javascript

spreadsheet

reactjs

react-hooks