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

Question

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

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

  //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，它使用来自 store 的默认 screenType 值调用我的函数 onRenderLink。\
• 当 store 的 screenType 值发生变化时，我的 useEffect 挂钩会打印更新的值，但此时我无法重新调用我的 onRenderLink，因为它之前已经被调用过。

如何使 screenType 值更改以再次调用 onRenderLink？我试着做。

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

我想当 screenType 改变时，这会重新触发我的回调方法，但这不是正在发生的事情。谢谢你的帮助

标签： reactjsreduxreact-hooks

Answer 1

您需要使用useMemo钩子，因为您希望onRenderLink()每次screenType更改时都会被调用并返回一个值。

它应该以这种方式实现：

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

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

  //onRenderLink gets invoked every time screenType updates and returns <>Hello</>
  const onRenderLink = useMemo((link: INavLink) => {
    //prints updated screenType when store changes
    console.log("screenType in onRenderLink", screenType);

    return (<>Hello</>);
  },[screenType]) // need to pass screenType to dependency list

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

如果您需要任何进一步的解释，请告诉我:)