能否在循环中初始化useState？react-spreadsheet多表格状态管理问题

能否在循环内创建useState？ #

绝对不可以，这是React Hooks的核心硬性规则：

• 所有Hook必须在组件的顶层作用域调用，不能出现在循环、条件判断、嵌套函数中。React依靠Hook的调用顺序匹配对应状态，如果循环次数变化（比如用户增删表格），Hook调用顺序会错位，直接导致状态匹配混乱，出现不可预期的bug。

原集中式状态方案的修复方法 #

你之前用单个数组集中存储所有表格数据的思路是可行的，出现异常是因为onChange的传参用法错误：直接把顶层状态的修改函数传给组件，会导致单个表格的数据更新直接覆盖整个状态数组。只需要给每个表格的更新函数绑定对应索引即可，示例代码如下：

// 顶层状态定义
const [stateData, setStateData] = useState([
  // 此处填写各个表格的初始数据
])

// 渲染逻辑
{stateData.map((tableData, index) => (
  <Spreadsheet
    key={index} // 若有表格唯一ID建议替换为ID，避免增删时出现渲染异常
    className='table'
    columnLabels={stringLabelCol}
    rowLabels={stringLabelRow}
    data={tableData}
    onChange={(newData) => {
      // 仅更新对应索引位置的表格数据
      setStateData(prev => {
        const newState = [...prev]
        newState[index] = newData
        return newState
      })
    }}
  />
))}

更推荐的优化方案 #

如果希望表格状态互相独立、降低耦合，可以把单个电子表格封装为独立组件，在组件内部使用useState管理自身数据，完全符合Hook使用规则：

// 封装独立的单表格组件
function SingleSpreadsheet(props) {
  const [data, setData] = useState(props.initialData)
  return (
    <Spreadsheet
      className='table'
      columnLabels={props.stringLabelCol}
      rowLabels={props.stringLabelRow}
      data={data}
      onChange={setData}
    />
  )
}

// 外层循环渲染即可
{tableList.map((item, index) => (
  <SingleSpreadsheet
    key={item.id || index}
    initialData={item.initialData}
    stringLabelCol={stringLabelCol}
    stringLabelRow={stringLabelRow}
  />
))}

内容的提问来源于stack exchange，提问作者Electacle