当我在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;

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

为什么showMenu值始终为false，即使在我使用setShowMenu将其设置为true之后，我也无法理解。有人有想法么？谢谢。

Answer 1

useEffect中有一个过时的闭包，这是钩子中较常见的问题之一。更改它以使用更新程序表单，它应该开始工作。

setShowMenu(prevVal => !prevVal);

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