Почему штатное состояние React не устанавливается должным образом, когда я нажимаю кнопку в навигационных опциях? - PullRequest
Новая
       10

Почему штатное состояние React не устанавливается должным образом, когда я нажимаю кнопку в навигационных опциях?

0 голосов
/ 18 марта 2020

У меня есть экран / компонент React Native, в котором в верхнем левом углу заголовка / заголовка есть кнопка меню. Когда эта кнопка нажата, я хочу создать меню на самом экране / компоненте, чтобы открывать и закрывать его.

По какой-то причине, хотя, как у меня сейчас настроено, при первом нажатии на меню Кнопка, меню открывается, но после этого оно всегда остается открытым и не закрывается, независимо от того, сколько раз я нажимаю кнопку. Кажется, что состояние не обновляется должным образом или что-то в этом роде.

Вот базовый c код, который у меня есть для переключения меню: 

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, мне не понятно. У кого-нибудь есть идеи? Спасибо.

1 Ответ

1 голос
/ 18 марта 2020

У вас есть несвежее закрытие в вашем useEffect. Это одна из самых распространенных проблем, с которыми люди сталкиваются с крючками. Измените его, чтобы использовать форму обновления, и он должен начать работать. 

setShowMenu(prevVal => !prevVal);

showMenu в основном застрял в своем начальном значении внутри useEffect, поэтому каждый раз, когда вызывается обновление, оно делает setShowMenu(!false). Вот почему он работает с первого раза.

Форма обновления гарантирует, что вы будете работать с самой последней копией состояния.

...