React Native问题：首次点击时状态变量未更新

嘿，这个问题我之前开发时也踩过坑！其实核心原因是React的useState状态更新是异步的，咱们来一步步拆解：

为什么会出现「第一次点击没更新」的假象？ #

当你在点击事件里调用setItemData(item)时，React并不会立刻修改itemData的值——它会把这个更新操作加入到待处理队列中，等当前的事件处理函数执行完毕后，才会批量更新状态并重新渲染组件。

所以你在setItemData之后立刻用ToastAndroid.show('setItem: ' + itemData)，打印的其实还是更新前的旧值（初始是空字符串）。等到第二次点击时，itemData已经是第一次点击设置的值了，这时候打印的就是上一次的内容，看起来就像“第一次没更新，第二次才更新”。

两种解决方案 #

方案1：用useEffect监听状态变化 #

如果你需要在itemData真正更新后做操作（比如展示Toast），可以用useEffect钩子监听itemData的变化，当它更新时再执行对应的逻辑：

import React, {useState, useEffect} from 'react';
import { Text, SafeAreaView, ToastAndroid } from 'react-native';
import Dropdown from './components/dropdown';

// 注意：React组件名必须首字母大写，这是官方规范哦
const App = () => {
  const [ itemData, setItemData ] = useState('');

  // 当itemData变化时触发回调
  useEffect(() => {
    // 初始状态是空字符串，避免第一次渲染就弹出Toast
    if (itemData) {
      ToastAndroid.show('Updated itemData: ' + itemData, ToastAndroid.LONG);
    }
  }, [itemData]); // 依赖项数组里放itemData，只有它变化时才执行

  return (
    <SafeAreaView style={{ margin: 50 }}>
      <Dropdown onPressItems={(item) => {
        ToastAndroid.show('item: ' + item, ToastAndroid.LONG);
        setItemData(item);
      }}/>
    </SafeAreaView>
  );
}

export default App;

方案2：直接使用传入的item值 #

如果你只是想在点击时立刻展示要设置的内容，完全不需要等状态更新——因为你已经知道要设置的item是什么了，直接用这个参数就行：

<Dropdown onPressItems={(item) => {
  ToastAndroid.show('item: ' + item, ToastAndroid.LONG);
  setItemData(item);
  // 直接用item，而不是还没更新的itemData
  ToastAndroid.show('setItem: ' + item, ToastAndroid.LONG);
}}/>

额外小提示 #

原代码里的组件名app要改成App（首字母大写），这是React的强制规范，小写的话React会把它当成普通HTML标签处理，可能会引发渲染异常。

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