在 React Native Input/TextInput 中输入值时如何更新 JSON 对象值

Question

I have a list questions for a user to complete as part of a survey, I am rendering the Questions out in different components that all live in a parent file. I am able to get each value from the child component updated in the state but now want to update the Answer field that I have within the JSON object which is currently set to Null.

This is my JSON object called data

I need to access each question and update the answer field.

My parent file currently looks like this:

export default function SurveyScreen({navigation, route}) {
  const [childNameValue, setChildNameValue] = useState('');

const updateQuestion = (answer, type_index, question_index) => {
    console.log(answer);
  };

return (
<ScrollView style={styles.cardContainer}>
        <View>
          <Text style={styles.title}>Please fill out all questions below</Text>
        </View>
        <View>

          <BasicTextInput
            title="Child's full name"
            value={childNameValue}
            onChangeValue={newValue => setChildNameValue(newValue)}
            updateQuestion(newValue);
          />
       );
}

And child component file:

export default function BasicTextInput({title, onChangeValue, updateQuestion}) {
  return (
    <View style={styles.container}>
      <View style={styles.containerHeader}>
        <Text style={styles.questionTitle}>{title}</Text>
      </View>
      <View style={styles.answerContainer}>
        <TextInput
          style={styles.input}
          onChangeText={onChangeValue}
          updateQuestion={updateQuestion}
        />
        <View />
      </View>
    </View>
  );
}

I'm getting the answer back in my parent component and successfully running console.log(answer).

I want to be able to update the answer field in the JSON object before running an axios request to submit it.

I thought running something along the lines of this inside my updateQuestion function may work but wondered the best way to do this?

data.questions[type_index].questions[question_index].answer.answer = answer;

Thank you in advance!

Answer 1

You could certainly just mutate the field you want to update.

Or you could use a proper immutable update that React will be able to detect:

// something like
const replace = (arr, i, insert) => [...arr.slice(0, i), insert, ...arr.slice(i+1)];
const updateDeepDeepAnswer = {
  ...data,
  questions: replace(data.questions, type_index, {
  ... data.questions[type_index],
  questions: replace(data.questions[type_index].questions, question_index, {
    ...data.questions[type_index].questions[question_index],
    answer: {
      ...data.questions[type_index].questions[question_index].answer,
      answer,
    },
  }),
}),
}

Which is why we try to keep data as simple as possible in React state.

I would be tempted to either:

1. Store the question sets and the questions on separate state slices. So an update to the answer field is not a deep update.
2. Store the answers separately, along with their question id. Then send those questionId + answer objects to your api to be saved in the db.