React中如何在useState数组中添加与更新对象（textarea场景）

问题场景 #

通过map渲染多个<textarea>，需要将每个输入值以{ id: 对应key, answer: 输入值 }的格式存入answers数组，要求实现存在则更新、不存在则添加的逻辑，避免覆盖原有答案。

解决方案 #

关键修改点 #

1. 初始化useState为空数组，确保初始状态符合数组类型要求
2. 使用函数式更新处理状态，避免依赖陈旧状态
3. 为<textarea>绑定value属性，实现受控组件，保证输入与状态同步

修改后的完整代码 #

function AnswerSheet({ questions }) {
  // 初始化空数组作为初始状态
  const [answers, setAnswers] = useState([]);

  return (
    <div className={questions.length ? "" : ""}>
      <ol className="">
        {questions.map(function (q, id) {
          // 找到当前id对应的答案，用于回显
          const currentAnswer = answers.find(item => item.id === id)?.answer || "";
          
          return (
            <li className="" id="" key={id}>
              {q.prompt}
              <span>
                <textarea
                  className=""
                  rows={1}
                  value={currentAnswer}
                  onChange={(ev) => {
                    // 函数式更新，基于最新状态修改
                    setAnswers(prevAnswers => {
                      const answerIndex = prevAnswers.findIndex(item => item.id === id);
                      if (answerIndex >= 0) {
                        // 存在则更新：复制原数组，替换对应位置的对象
                        const updatedAnswers = [...prevAnswers];
                        updatedAnswers[answerIndex] = { id, answer: ev.target.value };
                        return updatedAnswers;
                      } else {
                        // 不存在则添加：拼接新对象到原数组
                        return [...prevAnswers, { id, answer: ev.target.value }];
                      }
                    });
                  }}
                ></textarea>
              </span>
            </li>
          );
        })}
      </ol>
    </div>
  );
}
export default AnswerSheet;

逻辑说明 #

• findIndex用于定位当前id在数组中的位置，判断是否已存在对应答案
• 函数式更新setAnswers(prevAnswers => ...)确保每次修改都基于最新的状态快照，避免状态覆盖
• 通过find获取当前id的答案值绑定到value，实现输入框内容与状态同步，避免输入异常

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