当我点击导航选项中的按钮时，为什么没有正确设置 React Native 状态？

Question

我有一个 React Native screen/component，其中 nav/header 的左上角有一个菜单按钮。点击该按钮后，我想在 screen/component 本身中创建一个菜单来切换打开和关闭。

不管出于什么原因，根据我现在的设置，我第一次点击菜单按钮时，菜单会打开，但在那之后，它总是保持打开状态，不会关闭，无论有多少我点击按钮的次数。好像状态没有正确更新之类的。

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

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 中有一个陈旧的闭包。这是人们运行使用 hooks 遇到的最常见的问题之一。将其更改为使用更新程序表单，它应该会开始工作。

setShowMenu(prevVal => !prevVal);

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

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

当我点击导航选项中的按钮时，为什么没有正确设置 React Native 状态？

Why is React Native state not properly being set when I tap a button in navigationOptions?

javascript

reactjs

react-native

react-native-navigation

react-native-state