React遍历数组渲染的带默认值input如何绑定state实现可编辑

• React中如果给<input>设置了value属性，它就会成为受控组件，必须配套onChange事件同步更新value绑定的值，否则输入内容不会生效。当前代码直接绑定了静态导入数组的原始值，没有任何更新逻辑，输入自然无法修改。
• 原代码里useState写在了Test组件外部，违反React Hooks只能在组件内部顶层调用的规则，本身就会触发运行报错。
• 直接遍历渲染静态导入的data数组，这个数组本身是只读的常量，没有接入状态管理，修改无法同步到视图。

• 把导入的静态数组作为初始值，存入组件内部的state中
• 遍历state生成输入框列表，给每个输入框绑定onChange事件，输入触发时根据索引更新state中对应位置的值
• 更新数组类state时遵守不可变数据原则，不要直接修改原数组，生成新数组后再传给state更新方法

数据源文件data.js无需修改：

// data.js
export default [5, 2, 7, 9]

组件代码调整如下：

import { useState } from 'react'
import data from './data.js'

function Test() {
  // 静态数据初始化到组件内部state
  const [numberList, setNumberList] = useState([...data])

  // 根据索引更新对应输入框的值
  const handleChange = (index, e) => {
    const updatedList = [...numberList]
    updatedList[index] = e.target.value
    setNumberList(updatedList)
  }

  return (
    <>
      {numberList.map((item, index) => (
        <input
          key={index}
          value={item}
          onChange={(e) => handleChange(index, e)}
        />
      ))}
    </>
  )
}

export default Test

• 不要将Hooks写在组件外部、循环、条件判断里，必须在组件顶层作用域调用
• 受控组件必须保证value绑定的状态和onChange更新逻辑成对出现
• 数组、对象这类引用类型的state，更新时必须返回新的引用，否则React不会触发重渲染

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