Реакция - обновление состояния от дочернего компонента не работает

Question

Я играю с проектом React-Native и пытаюсь реализовать простое выпадающее меню. Проведя некоторые исследования, я решил использовать эту библиотеку для ее выполнения sh.

Я изо всех сил пытаюсь понять ссылки в React, и вот что я имею в виду:

У меня есть этот простой экран, который отображает кнопку с выпадающим меню в правом верхнем углу, используя реагирующую навигацию:

export default function () {
 const nav = useNavigation();
 const [hideCompleted, setHideCompleted] = useState(false);

  useEffect(() => {
    nav.setOptions({
      headerRight: () => (
        <ContextMenu
          hideCompleted={hideCompleted}
          handleCompletedClicked={() => {
            setHideCompleted(!hideCompleted);
          }}
        />
      ),
    });
  }, []);
}

И ContextMenu выглядит так:

export default ({ hideCompleted, handleCompletedClicked }) => {
  let menuRef = useRef();

  const setMenuRef = (ref) => {
    menuRef.current = ref;
  };

  const handleHideCompleted = () => {
    menuRef.current.hide();
    handleCompletedClicked();
  };

  return (
    <View>
      <Menu
        ref={setMenuRef}
        button={<Button onPress={showMenu} />}>
        <MenuItem onPress={handleHideCompleted}>
          {hideCompleted ? 'Show' : 'Hide'} completed
        </MenuItem>
      </Menu>
    </View>
  );
};

Проблема проста. Всякий раз, когда я нажимаю Hide completed, это работает, но второй щелчок - нет. Я полагаю, что неправильно передаю hideCompleted или не переопределяю компонент ContextMenu при изменении состояния его родительского элемента.

Спасибо за помощь:)

Answer 1

Лучшим решением здесь является использование обратного вызова для установки состояния. Например:

setHideCompleted((prevHideCompleted) => !prevHideCompleted);

Таким образом, вы используетеEffect больше не будет запускаться при каждом обновлении состояния.

 useEffect(() => {
    nav.setOptions({
      headerRight: () => (
        <ContextMenu
          hideCompleted={hideCompleted}
          handleCompletedClicked={() => {
            setHideCompleted((prevHideCompleted) => !prevHideCompleted);
          }}
        />
      ),
    });
  }, []);

Answer 2

Поскольку вы визуализируете компонент внутри useEffect, который запускается только при монтировании (пусто []), ContextMenu больше не рендерится с новым hideCompleted. просто добавьте его в массив зависимостей

---

   useEffect(() => {
     nav.setOptions({
      headerRight: () => (
       <ContextMenu
        hideCompleted={hideCompleted}
        handleCompletedClicked={() => {
          setHideCompleted(!hideCompleted);
        }}
       />
      ),
     });
   }, [hideCompleted]);
  )