Question

我有一个这样的对象数组：

Array [
  Object {
    "id": 1,
    "question": "Have you had any of the following symptoms in the last 24 hours?",
    "choices": Array [
      Object {
        "answer": false,
        "choice": "Cough",
        "id": 1,
        "questionID": 1,
      },
      Object {
        "answer": false,
        "choice": "Shortness of Breath",
        "id": 2,
        "questionID": 1,
      },
      Object {
        "answer": false,
        "choice": "Cold",
        "id": 3,
        "questionID": 1,
      },
    ],
  },
  Object {
    "id": 2,
    "question": "Have you had at least TWO of the following symptoms in the last 24 hours?",
    "choices": Array [
      Object {
        "answer": false,
        "choice": "Fever (usually 37.6 C or greater)",
        "id": 4,
        "questionID": 2,
      },
      Object {
        "answer": false,
        "choice": "Chills",
        "id": 5,
        "questionID": 2,
      },
      Object {
        "answer": false,
        "choice": "Repeated shaking with chills",
        "id": 6,
        "questionID": 2,
      },
      Object {
        "answer": false,
        "choice": "Muscle Pain",
        "id": 7,
        "questionID": 2,
      },
      Object {
        "answer": false,
        "choice": "Headache",
        "id": 8,
        "questionID": 2,
      },
      Object {
        "answer": false,
        "choice": "Sore Throat",
        "id": 9,
        "questionID": 2,
      },
      Object {
        "answer": false,
        "choice": "Diarrhea",
        "id": 10,
        "questionID": 2,
      },
      Object {
        "answer": false,
        "choice": "New loss of taste or smell",
        "id": 11,
        "questionID": 2,
      },
    ],
  },
]

我将其用作动态数据在Android上生成问卷：

该对象位于state中，因此我想根据其同级answer将id键更改为false或true。

例如：

Object {
     "answer": false,
     "choice": "Cold",
     "id": 3,
     "questionID": 1,
}

当我点击choice为3的id时，answer应该更新为true。

我试图指向question的索引和choices的ID，但它返回未定义的

<View>
  {questions.map((question, questionIndex) => {
    return (
      <View style={styles.container}>
        <Text>{question.question}</Text>

        {question.choices.map((choice) => {
          return (
            <View style={styles.checkboxContainer}>
              <Text style={styles.choice}>{choice.choice}</Text>
              <CheckBox
                style={styles.checkbox}
                value={choice.answer}
                onValueChange={() =>
                  handleChange(questionIndex, choice.id)
                }
              />
            </View>
          );
        })}
      </View>
    );
  })}
  <TextInput style={styles.remark} multiline={true} />
  <View style={{ marginTop: 20 }}></View>
  <Button title="Confirm Decline" color="red" />
</View>

这是handleChange函数：

const handleChange = ( questionIndex, id ) => {
  console.log("Question Index: " + questionIndex);
  //Question Index: undefined
  console.log("Choice ID: " + id);
  //Choice ID: undefined
};

Answer 1

您可以使用以下内容访问相关答案。

questionState[questionIndex].choices.find(c => c.id == id).answer

将其从true切换到false，反之亦然

const choice = questionState[questionIndex].choices.find(c => c.id == id);
choice.answer = !choice.answer;

但是从复选框中显式检索值并相应地设置答案会更可靠。

为此，您需要将event传递给handleChange，以便可以访问已更改元素的值。

<CheckBox style={styles.checkbox} value={choice.answer} 
  onValueChange={(event) =>
    handleChange(event, questionIndex, choice.id)
  }
/>

并将其设置为

questionState[questionIndex].choices.find(c => c.id == id).answer = event.target.checked;

更新状态

在更新嵌套状态对象时，需要特别注意不要使状态发生变化。

假设您使用的是useState()钩子，则可以通过向setState传递回调来避免这种情况。

const handleChange = ( event, questionIndex, id ) => {

  setQuestionState(prevState => {
    prevState[questionIndex].choices.find(c => c.id == id).answer = event.target.checked;
  })

};

否则，您将需要手动确保克隆状态对象的每个级别，然后才能最终使用更新的值/对象设置状态。

在React JS中用ID替换对象的值

1 个答案: