React Native中TextInput绑定useState失效，提交时值为空求助

你遇到的问题是受控TextInput的状态在useEffect里能正常打印，但提交时onSubmit里的description为空，核心原因大概率是闭包陷阱——虽然你给useCallback加了description依赖，但如果onSubmit的引用被缓存（比如父组件传递给子组件时没正确更新，或者被某些事件系统保留了旧引用），调用时就会捕获到旧的description值。

解决方案一：用useRef保存最新状态 #

这是最直接的解决方式，通过useRef实时同步最新的description值，不管闭包怎么捕获，都能拿到当前最新的内容：

const [description, setDescription] = useState('');
const descriptionRef = useRef('');

// 同步状态到ref
useEffect(() => {
    descriptionRef.current = description;
    console.log('descriptiondescription >>>>>>> ', description);
}, [description]);

const onSubmit = useCallback(async () => {
    // 这里用ref.current获取最新值
    const currentDesc = descriptionRef.current;
    console.log('description >>> ', currentDesc);
    
    const asset = res.assets[0];
    const extension = asset.fileName.split('.').pop();
    const reference = storage().ref(`/photo/${user.id}/${v4()}.${extension}`);

    if (Platform.OS === 'android') {
        await reference.putString(asset.base64, 'base64', {
            contentType: asset.type,
        });
    } else {
        await reference.putFile(asset.uri);
    }

    const photoURL = await reference.getDownloadURL();
    // 这里也用currentDesc
    await createPost({user, photoURL, description: currentDesc});

    events.emit('refresh');
    navigation.pop(); // 移到最后，避免组件提前卸载
    
},[res, user, navigation]); // 这里可以去掉description依赖，因为用了ref

解决方案二：检查onSubmit的触发绑定 #

如果你的提交按钮是子组件，确保子组件没有用React.memo缓存旧的props，或者在传递onSubmit时没有错误地保留旧引用。比如如果子组件是：

const SubmitButton = React.memo(({ onPress }) => <Button onPress={onPress} />);

要确保当onSubmit更新时，子组件能接收到新的onPress引用——因为你已经把description加入useCallback依赖，只要description变化，onSubmit就会重新创建，子组件应该能触发重渲染。如果还是有问题，可以给子组件加key或者去掉memo试试。

额外排查点 #

• 确认提交按钮的onPress确实绑定的是最新的onSubmit，而不是某个初始化时的旧函数。
• 避免在异步操作完成前调用navigation.pop()，防止组件提前卸载引发其他状态异常。

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