React Native中TextInput输入时如何更新JSON对象对应字段值

核心改造说明 #

React中需要响应式更新的数据必须存入useState管理，直接修改普通JSON对象不会触发视图同步，也不符合React状态更新的不可变原则，这是你原写法不生效的核心原因。

步骤1：将问卷data存入父组件状态 #

把你的初始JSON问卷数据作为useState的初始值，无需单独维护每个输入框的状态：

// 替换为你实际的初始问卷结构
const initSurveyData = {
  questions: []
}

export default function SurveyScreen({navigation, route}) {
  // 把问卷数据存为响应式状态
  const [surveyData, setSurveyData] = useState(initSurveyData);
  // 原单独维护的childNameValue可以删除，统一从surveyData取值

步骤2：修正组件传参与调用逻辑 #

你当前的代码存在两处调用错误：

• 父组件给BasicTextInput传updateQuestion时不能直接执行，要作为回调传递，同时传入当前问题对应的type_index和question_index
• 子组件不要把updateQuestion传给原生TextInput，要在输入变化时主动触发回调

修正后的父组件调用示例

// 示例中当前渲染的是type_index=0、question_index=0的问题，按你实际渲染的索引修改即可
<BasicTextInput
  title="Child's full name"
  value={surveyData.questions[0].questions[0].answer?.answer || ''}
  updateQuestion={(newValue) => updateQuestion(newValue, 0, 0)}
/>

修正后的子组件代码

export default function BasicTextInput({title, value, 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}
          value={value}
          onChangeText={(newValue) => updateQuestion(newValue)}
        />
        <View />
      </View>
    </View>
  );
}

步骤3：实现不可变的状态更新逻辑 #

在updateQuestion方法中按不可变原则更新状态，不要直接修改原对象属性：

const updateQuestion = (answer, type_index, question_index) => {
  setSurveyData(prev => {
    // 逐层拷贝避免修改原状态
    const newData = {...prev};
    newData.questions = [...newData.questions];
    newData.questions[type_index] = {...newData.questions[type_index]};
    newData.questions[type_index].questions = [...newData.questions[type_index].questions];
    newData.questions[type_index].questions[question_index] = {
      ...newData.questions[type_index].questions[question_index],
      answer: {
        ...newData.questions[type_index].questions[question_index].answer,
        answer: answer
      }
    };
    return newData;
  });
};

如果觉得深层展开的写法繁琐，可以引入immer库简化不可变更新逻辑，直接修改draft对象即可自动生成新的状态。

后续提交说明 #

所有输入值都会实时同步到surveyData中，最后提交时直接把surveyData作为axios的请求参数传给后端即可，无需额外拼接数据。

内容的提问来源于stack exchange，提问作者Asher