如何使用setState更新子列表中对象实例的属性

我有一个quiz对象，它包含questions列表，列表中的每个question对象都有对应属性。我想要更新questions列表中某个question对象里名为question的属性（已知命名规范不佳），且不想创建该选中question的独立实例。

我原本写了这段代码，但在选中待编辑question的方括号部分出现语法错误：

onChange={(e) => setQuiz({ ...quiz, questions[quiz.questions.indexOf(selectedQuestion)].question: e.target.value })} 

错误提示：

Unexpected token, expected ","

解决方案 #

直接通过map遍历questions数组，定位到目标索引的对象后更新对应属性，同时保留其他对象的原有状态，既满足不创建独立实例的需求，也符合React状态更新的不可变原则。

完整可运行代码 #

import { useState, useEffect } from 'react';

function App() {
  const [quiz, setQuiz] = useState({
    title: "",
    number: 6,
    questions: [
      { question: "item1", number: 3 },
      { question: "item2", number: 3 }
    ]
  });

  const [selectedQuestion, setSelectedQuestion] = useState(0);

  useEffect(() => {
    setSelectedQuestion(0);
  }, []);

  useEffect(() => {
    console.log("quiz", quiz);
    console.log("quiz question", quiz.questions[0]);
  }, [quiz]);

  useEffect(() => {
    console.log("selectedQuestion", selectedQuestion);
  }, [selectedQuestion]);

  return (
    <div className="App">
      <input
        type="text"
        value={quiz.questions[selectedQuestion].question}
        onChange={(e) =>
          setQuiz({
            ...quiz,
            questions: quiz.questions.map((child, index) =>
              index === selectedQuestion
                ? { ...child, question: e.target.value }
                : child
            )
          })
        }
      />
    </div>
  );
}

export default App;

错误原因说明 #

你原来的写法在对象字面量中直接使用questions[xxx].question作为键名，这不符合JavaScript语法规范。对于嵌套数组类型的React状态，不能直接通过路径修改属性，必须通过遍历数组、复制并更新目标元素的方式来完成状态更新，确保状态的不可变性。

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