React Native问题：TextInput值无法随State更新同步变更

问题核心原因 #

useState的更新是异步批量处理的，调用setInputValue后，state不会立刻完成更新。你在handleChange里直接打印的inputValue是当前函数闭包中的旧值，并非刚提交的新值。

至于你提到的<Text>组件显示旧值，这其实是误解——当state更新完成后，组件会自动重新渲染，<Text>会同步显示最新的inputValue，可以直接观察组件显示效果，无需依赖console.log的即时输出。

解决与验证方案 #

1. 正确查看更新后的state值
   要监听state的最终更新结果，使用useEffect监听inputValue的变化：

   import React, { useState, useEffect } from 'react';
   import { View, TextInput, Text } from 'react-native';
   
   export default function MyComponent() {
     const [inputValue, setInputValue] = useState('');
   
     useEffect(() => {
       console.log('Updated Input value:', inputValue); // 这里会打印最新的state值
     }, [inputValue]);
   
     const handleChange = (text) => {
       setInputValue(text);
     };
   
     return (
       <View>
         <TextInput
           value={inputValue}
           placeholder="Type something..."
           onChangeText={handleChange}
         />
         <Text>Current Value: {inputValue}</Text>
       </View>
     );
   }
   

2. 极端情况排查（若<Text>确实不更新）

   • 检查父组件是否用React.memo缓存了MyComponent且未正确传递依赖项
   • 确认TextInput没有被隔离状态的自定义组件/Context包裹
   • 排查handleChange中是否存在异步操作意外覆盖state值的情况

内容的提问来源于stack exchange，提问作者André Silverio Silva