使用反应钩子实现先前的问题逻辑

Question

我正在制作一个非常简单的反应测验应用程序，您可以在其中通过“下一步”按钮从一个问题到另一个问题 go。 每次单击下一个按钮时，一个 useState 钩子（作为道具传递给 onAnswerUpdate）将带有问题标题和所选答案的 object 推送到名为“答案”的数组中：

 const nextClickHandler = (e) => { if(selected === '') { return setError('Please select one option'); } onAnswerUpdate(prevState => [...prevState, { q: data.question, a: selected }]); setSelected(''); if(activeQuestion < numberOfQuestions - 1) { onSetActiveQuestion(activeQuestion + 1); }else... }

我实现了一个基本的上一个按钮逻辑，其唯一的 function 是返回上一个问题，但是当我将答案更改为已回答的问题时，我很难找到一种方法来替换与正确问题相对应的答案数组中的 object。 我尝试使用 activeQuestion 编号作为数组的索引（如下面的代码示例）和 splice 方法替换它，但它们都不起作用。 任何帮助将不胜感激。

 const nextClickHandler = (e) => { if(selected === '') { return setError('Please select one option'); } onAnswerUpdate(prevState => [...prevState, answers[activeQuestion] = { q: data.question, a: selected }]); setSelected(''); if(activeQuestion < numberOfQuestions - 1) { onSetActiveQuestion(activeQuestion + 1); } else...

Answer 1

与prevState挂钩，数组总是让我发疯......我更喜欢使用更简单的方法。 如果您需要替换 state 上的数组中的元素，您可以编写：

...
let currAnswer = answer;
currAnswer[activeQuestion] = { q: data.question, a: selected };
onAnswerUpdate(currAnswer);
...