React Native从子组件TextInput更新父状态时输入值为undefined如何解决

问题根因列表 #

• 子组件参数接收错误：函数组件仅接收一个props参数，你拆分写为({title, onChange}, props)的写法是错误的，第二个props永远为空，无法获取父组件传入的value属性
• React Native的TextInput取值逻辑错误：Web端常用的e.target.value在RN中不生效，RN的TextInput输入值需要从e.nativeEvent.text获取，更推荐直接使用onChangeText回调直接拿到输入文本
• 子组件属性绑定错误：
  1. TextInput的value绑定了不存在的props.childNameValue，父组件实际传入的属性名为value
  2. 标题渲染时直接写了静态文本title，没有绑定变量
  3. 子组件内部定义的text状态完全未使用，属于冗余代码
• 父组件打印逻辑问题：useState的状态更新是异步的，调用setChildNameValue后立刻打印childNameValue拿到的是更新前的旧值

修复后代码 #

父组件SurveyScreen #

import {useEffect, useState} from 'react';
import {ScrollView, View, Text} from 'react-native';

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

  // 监听状态变化打印最新值，或直接在handleChange里打印newValue
  useEffect(() => {
    console.log('最新的输入值：', childNameValue);
  }, [childNameValue])

  function handleChange(newValue) {
    setChildNameValue(newValue);
  }

  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}
          onChange={handleChange}
        />
      </View>
    </ScrollView>
  );
}

子组件BasicTextInput #

import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  TextInput,
} from 'react-native';

// 统一在第一个参数里解构所有传入的属性
export default function BasicTextInput({title, onChange, value}) {
  // 移除冗余的内部text状态，由父组件统一控制输入值（受控组件模式）
  return (
    <View>
      <View>
        {/* 绑定title变量 */}
        <Text>{title}</Text>
      </View>
      <View>
        <TextInput
          style={styles.input}
          // 用onChangeText直接拿到输入文本，无需处理事件对象
          onChangeText={onChange}
          // 绑定父组件传入的value
          value={value}
        />
        <View />
      </View>
    </View>
  );
}

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