Question

我正在学习如何正确使用ReactHooks。我遇到了如下所述的问题：

我正在使用Nav component作为第三方库。我使用钩子的组件如下所示：

  //using redux selector to get value from state 
  const { screenType } = useSelector((state: IStateStore) => ({
    screenType: state.screenType
  }));

  // dummy use effect to see when store's screentype is being updated
  React.useEffect(() => {
    console.log("screentype in effect", screenType); //prints updated when store changes
  }, [screenType]);

  //onRender callback I pass to my third party component
  const onRenderLink = (link: INavLink) => {
    console.log("Screen Type inside :", screenType);//never gets executed after screentype updates
    return (<>Hello</>);
  };

  return (
      <Navigation
        groups={[]}
        onRenderLink={onRenderLink}
      />
    </div>
  );
};

我的问题是：

当我的组件渲染时，将调用onRenderLink，它会使用商店中的默认screenType值调用我的函数onRenderLink。 \
当商店的screenType值更改时，我的useEffect钩子会打印更新后的值，但是由于无法在之前调用onRenderLink，因此我无法重新调用它。

如何使screenType值更改再次调用onRenderLink？我试过了

  <Navigation
        className="sectionTabs"
        groups={[]}
        onRenderLink={React.useCallback(onRenderLink, [screenType])}
  />

我认为，当screenType更改时，这将重新触发我的回调方法，但事实并非如此。谢谢您的帮助

Answer 1

尝试将screenType作为导航的key

<Navigation
        key={screenType}
        groups={[]}
        onRenderLink={onRenderLink}
      />

ReactHooks：存储值更改时调用回调

1 个答案: