如何在 React 中使用 useState 在对象数组中添加一个对象？

Question

我正在处理一个包含问题、答案和分数/等级的测试的页面。根据管理员选择的问题数量，它会生成一个与问题、答案和分数对应的动态输入字段，并带有一个添加问题按钮。当我按下添加问题时，应该有一个对 handleQuestion 函数的回调，在该函数中创建了一个带有 question、answer 和 points 属性的对象。 问题、答案和分数的值是使用 useState 设置的。我尝试使用扩展运算符 (...) 在 testContent 数组中添加新对象，但是当我在完成问题字段后按“添加”时，没有任何变化。有人可以告诉我我做错了什么吗？

这是句柄问题函数：

const handleQuestion = (e) => {
    e.preventDefault();
    const createQuestion= {
       "questionContent": question,
       "questionAnswer": answer,
       "questionPoints": points 
    }
    setTestContent(testContent => [...testContent, createQuestion]);
}

这是设置问题、答案和分数的地方：

return  questions.map((quest) => (
    <div>
        <div>
            <label htmlFor="testContent"> Question {quest + 1} </label>
            <input
                type="text"
                className="form-control"
                name="question"
                //value={question}
                onChange={onChangeQuestion}
                validations={[required, validContent]}
            />
        </div>
        <div>
            <label htmlFor="testContent"> Answer for question {quest + 1}</label>
            <input
                type="text"
                className="form-control"
                name="answer"
                //value={question}
                onChange={onChangeAnswer}
                validations={[required, validContent]}
            />
        </div>
        <div>
            <label htmlFor="testContent"> Points for question {quest + 1}</label>
            <input
                type="text"
                className="form-control"
                name="points"
                // value={}
                onChange={onChangePoints}
                validations={[required, validContent]}
            />
        </div>
        <button onClick={handleQuestion}>Add question</button>
    </div>
    ))

还有：

const[question, setQuestion] = useState("");
const[answer, setAnswer] = useState("");
const[points, setPoints] = useState("");
const[testContent, setTestContent] = useState([]);

Answer 1

content 不是 createQuestion 的键，因此您只需将 undefined 添加到 testContent。 createQuestion 只有“questionContent”、“questionAnswer”和“questionPoints”作为键

const createQuestion= {
   "questionContent": question,
   "questionAnswer": answer,
   "questionPoints": points 
}

你想做的事情

setTestContent(testContent => [...testContent, createQuestion]); 

改为