javascript - 当我点击 navigationOptions 中的按钮时，为什么没有正确设置 React Native 状态？

Question

我有一个 React Native 屏幕/组件，其中导航/标题的左上角有一个菜单按钮。当点击该按钮时，我想在屏幕/组件本身中创建一个菜单，切换打开和关闭。

无论出于何种原因，按照我现在的设置方式，第一次点击菜单按钮时，菜单会打开，但之后，无论我点击多少次，它始终保持打开状态并且不会关闭点击按钮。状态似乎没有正确更新或其他什么。

这是我用于菜单切换的基本代码:

const Screen = ({ navigation }) => {
    const [showMenu, setShowMenu] = useState(false);

    useEffect(() => {
        navigation.setParams({
            toggleMenu: () => {
                setShowMenu(!showMenu);
            }
        });
    }, []);

    return (
        <View>
            { showMenu &&
                <FlatList
                    // Menu code here.
                />
            }
            {/* Other screen rendering here. */}
        </View>
    );
};

Screen.navigationOptions = ({ navigation }) => {
    const { params } = navigation.state;

    return {
        headerLeft: () => {
            return (
                <TouchableOpacity
                    onPress={params.toggleMenu}
                >
                    <Text>Menu</Text>
                </TouchableOpacity>
            );
        }
    };
};

export default Screen;

我认为这可能是一些关闭问题，但我真的不确定。我向 toggleMenu 添加了 console.log，当我进入该函数时，showMenu 值始终为 false ，然后将其设置为 true，因此菜单不会关闭。

为什么 showMenu 值始终为 false，即使在我使用 setShowMenu 将其设置为 true 后也是如此但超出了我的范围。有人有主意吗？谢谢。

Answer 1

您的 useEffect 中有一个陈旧的闭包。这是人们在使用 Hook 时遇到的最常见问题之一。将其更改为使用更新程序表单，它应该开始工作。

setShowMenu(prevVal => !prevVal);

showMenu 基本上停留在 useEffect 内的初始值，因此每次调用更新时它都会执行 setShowMenu(!false)。这就是为什么它第一次看起来有效。

更新程序表单保证您将使用最新的状态副本。