React Native -管理复选框状态

Question

我想做一个Quiz App。

用户按提交按钮后检查问题。

所以问题会同时检查

我需要保存用户选择(答案)每个问题然后在提交时检查它们

我在想这个:

let [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
let [userAnswers, setUserAnswers] = useState([] as any);
function answerClick(value: any, key: any) {
// console.log('answer clicked');
userAnswers[currentQuestionIndex][key] = value; 
// TypeError: undefined is not an object (evaluating 'userAnswers[currentQuestionIndex][key] = value')
}

问题中每个可能答案的复选框:

<BouncyCheckbox
key={index}
onPress={(value) => {
answerClick(value, index);
}}
text={answer.title}
/>

但是我得到

TypeError: undefined is not an object (evaluating 'userAnswers[current][key] = value')

点击答案

setUserAnswers()相当于userAnswers[currentQuestionIndex][key] = value

?为什么我得到未定义的错误?

如何做到这一点，请帮助我的头疼。

Answer 1

您正在尝试访问数组中不存在的索引。

userAnsqers = [];
currentQuestionIndex = 0;
// userAnswers[currentQuestionIndex] === undefined

您要做的是将{}惰性地添加到数组中(仅在需要时)。

function answerClick(value: any, key: any) {
setUserAnswers(latest => {
const out = [...latest];
while (out.length <= currentQuestionIndex) out.push({});
out[currentQuestionIndex][key] = value;
return out;
})
}

对于userAnswers[currentQuestionIndex][key] = value没有等价于setUserAnswers()的东西(见)。你可以找到一些自定义钩子来管理数组或构建你自己的。

Answer 2

首先，userAnswers应该具有您试图更改的所有内容的键和值。你得到未定义的原因是因为你试图瞄准userAnswers数组中找不到的对象。此外，您直接修改userAnswers状态，这是错误的。这就是setUserAnswers的作用。你可以这样做。

function answerClick(value: any, key: any) {
// console.log('answer clicked');
setUserAnswers([
...usersAnswers,
{[key]: [value]}
]);
}