React Native：第一次点击时变量状态未更新

Question

我是 react-native 的新手，我正在开发一个应用程序。

下面的代码是一个简单的 react-native 应用程序，它有一个带有自定义事件的自定义组件。

但问题是第一次单击组件时变量状态没有更新。但是当我点击第二项时，变量的状态被更新了。

请在下面找到代码和屏幕截图。

App.js

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

const app = () => {
    const [ itemData, setItemData ] = useState('');

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

export default app;

Dropdown.js

import React, { useState } from 'react';
import { TouchableOpacity, Text } from 'react-native';

const Dropdown = (props) => {
    return (
        <TouchableOpacity onPress={() => { props.onPressItems('this is sample data') }}>
            <Text>Sample Text</Text>
        </TouchableOpacity>
    );
} 

export default Dropdown;

截图

代码： https://snack.expo.dev/@likithsai/custom-component

请帮我解决这个问题。谢谢

Answer 1

useState() 挂钩异步更改状态。所以你不能确保在调用 setItemData() 函数后状态会立即改变。

尝试 useEffect 到运行状态改变时的副作用。

useEffect(() => {
  ToastAndroid.show("setItem: " + itemData, ToastAndroid.LONG);
}, [itemData]);

但是，此代码将在组件安装上显示 toast。为了防止它尝试这样的事情：

const isInitialMount = useRef(true);

useEffect(() => {
  if (isInitialMount.current) {
    isInitialMount.current = false;
  } else {
    ToastAndroid.show("setItem: " + itemData, ToastAndroid.LONG);
  }
}, [itemData]);

Answer 2

您的代码运行正常。 useEffect 可用于监视状态更新的挂钩之一。您可以将其添加到您的代码中并查看它是否正常工作：

const app = () => {
    const [ itemData, setItemData ] = useState('');

    React.useEffect(() => {
      console.log('updated itemData:', itemData)
    }, [itemData])

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

您需要考虑到 useState 更新是异步的，这意味着更改不会立即反映出来。

React Native：第一次点击时变量状态未更新

React Native: Variable state not updated on first click

react-native

react-android