如何将输入文本值存入数组？React状态更新代码报错求助

错误分析 #

原代码存在三个核心问题：

1. State类型不匹配：初始dataNew是数组，但更新时返回了包含dataHere的对象，导致State类型从数组变为对象，后续操作会出现属性访问错误。
2. 错误的State属性访问：尝试访问prevInfo.newData，但prevInfo本身就是之前的数组State，不存在newData属性。
3. 数组更新方式错误：使用Object.assign处理数组的方式不符合React不可变更新的要求，且逻辑有误。

修正后的代码 #

// 初始State保持为数组（与传入的newData结构一致）
const [dataNew, setDataNew] = useState(newData);

const textChange = (data) => {
  const { id, value } = data;
  // 从id中提取正确的索引（假设id格式为"row-0"这类形式）
  const dataIndex = Number(id.split('-')[1]);
  
  setDataNew((prevData) => {
    // 以不可变方式更新数组：遍历原数组，更新对应索引的元素
    return prevData.map((item, index) => {
      if (index === dataIndex) {
        // 根据实际数据结构修改，这里假设需要更新item的value字段
        return { ...item, value };
      }
      return item;
    });
  });
};

console.log('NEW DATA', dataNew); // 注意：要打印更新后的State，应该用dataNew而非原始的newData

补充说明 #

• 如果你的id格式不是row-数字，可以调整索引提取逻辑（比如用正则匹配数字部分：const dataIndex = Number(id.match(/\d+/)[0])）。
• 若需要更新的不是value字段，可替换为实际要修改的属性名。
• 始终保证React State的不可变性：不要直接修改原数组，而是创建新数组后再更新State。

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