React中如何更新由对象生成的表单问题对应的答案？

尝试在React中创建表单，从Flask后端获取字典形式的问题并转为对象，组件渲染代码如下：

const [questions, setQuestions] = useState('');
const [answers, setAnswers] = useState('');

// answers从API获取，初始时questions和answers结构匹配
... 

{ Object.entries(questions).map(([key, question]) =>
 (
   <>
     <p> {question}</p>
     <textarea value = {answers[key]} onChange = {(e) => setAnswers(prevAnswer => ({...prevAnswer, key:e.target.value}))} 
     type = 'text' required />      
   </>
 )
)
}

目前能更新值，但无法将值关联到对象对应的键上。

编辑：找到一篇相关旧帖，核心内容为：如何在对象属性更新时重新渲染React组件？

• 修正状态初始化：questions和answers初始值设为空字符串是错误的，后续要当作对象处理，应初始化为空对象：

  const [questions, setQuestions] = useState({});
  const [answers, setAnswers] = useState({});
  

• 修复键名关联问题：当前onChange回调里，直接写key会把所有更新存到名为key的属性里，而非循环中拿到的实际键值。需要用计算属性名（把key用方括号包裹）：

  <textarea 
    value={answers[key] || ''} 
    onChange={(e) => setAnswers(prevAnswer => ({...prevAnswer, [key]: e.target.value}))} 
    type='text' 
    required 
  />
  

  这样输入值就能正确关联到answers对象中对应的键。

• 组件重渲染逻辑：通过扩展运算符...prevAnswer创建新对象并更新属性时，React会检测到answers状态的引用变化，自动触发重渲染。如果之前遇到不渲染的情况，大概率是直接修改了原对象（比如prevAnswer[key] = e.target.value）而未返回新对象，导致React无法感知状态变化。

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