1

我有一个 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.logto toggleMenu，并且该showMenu值始终是false当我进入该函数时，然后将其设置为true，因此菜单不会关闭。

为什么showMenu值总是false，即使在我将setShowMenu其设置为true之后也是如此。有人有想法么？谢谢你。

4

1 回答 1

1

您的useEffect. 这是人们在使用钩子时遇到的最常见问题之一。将其更改为使用更新程序表单，它应该开始工作。

setShowMenu(prevVal => !prevVal);

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

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

于 2020-03-18T20:41:46.157 回答