React - 从子组件更新 state 不起作用

Question

我正在玩一个 React-Native 项目，我正在尝试实现一个简单的下拉菜单。 在做了一些研究之后，我决定使用这个库来完成它。

我正在努力理解 React 中的 refs，这就是我的意思：

我有这个简单的屏幕，它使用 react-navigation 在右上角呈现一个带有下拉菜单的按钮：

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 ，或者当父级的 state 更改时没有重新渲染 ContextMenu 组件。

谢谢您的帮助：）

Answer 1

因为您在 useEffect 中渲染仅在 mount (empty [] ) 时运行的组件，所以ContextMenu没有使用 new hideCompleted再次渲染。 只需将其添加到依赖数组

---

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

Answer 2

这里最好的解决方案是使用回调来设置 state。像这样：

setHideCompleted((prevHideCompleted) => !prevHideCompleted);

这样，您的 useEffect 将不会在每个 state 更新上再次运行。

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