Question

React Native - 管理复选框状态

2021-09-20

130

javascript reactjs react-native

我想制作一个测验应用程序。

用户按下“提交”按钮后，将检查问题。

因此，问题最终将 一次性 全部检查。

我需要 保存每个问题 的用户选择（答案），然后在提交时检查它们。

我在考虑这个：

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]}
    ]);
  }