React状态更新后map渲染未更新问题求助

问题出在你直接修改了原数组内容，然后把同一个数组引用传给setNewFaq。React通过浅比较判断状态是否更新，当数组引用未发生变化时，它会认为状态没有改变，因此不会触发组件重渲染，map自然也不会重新执行。

修复后的代码 #

你需要创建新的数组引用，而非直接修改原state数组，用扩展运算符就能轻松实现：

const [newFaq, setNewFaq] = React.useState(questionReponse)

const addQuestion = () => {
  // 生成原数组的浅拷贝，添加新元素得到新数组
  const updatedFaq = [...newFaq, {id: newFaq.length + 1, question: "", reponse: ""}];
  setNewFaq(updatedFaq);
  console.log(updatedFaq);
}

return (
  <div className="main">
      <div className="block">
        { 
          newFaq.map((el, index) => {
            return (<QuestionModif key={el.id} id={index} question={el.question} reponse={el.reponse} onGetValues={handleSubmit}/>)
          })
        }
      </div>
  </div>
);
};

核心说明 #

• React的状态是不可变的，永远不要直接修改state对象或数组，必须返回新的引用才能让React识别状态变化。
• [...newFaq]会创建原数组的浅拷贝，添加新元素后得到全新数组，此时setNewFaq传入新引用，React就能检测到状态更新，触发组件重渲染。

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