当我点击 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 中有一个陈旧的闭包。这是人们在使用钩子时遇到的最常见问题之一。将其更改为使用更新程序表单，它应该可以开始工作了。

setShowMenu(prevVal => !prevVal);

showMenu 基本上停留在useEffect 中的初始值，因此每次调用更新时它都在执行setShowMenu(!false)。这就是为什么它似乎第一次起作用的原因。

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