使用反應鈎子實現先前的問題邏輯

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);
...