Question

当我尝试在应用程序的入口点定义的useEffect挂钩中触发操作时遇到问题。在组件树的下方，我正在使用useEffect挂钩进行API调用，这些API使用在我描述的入口点中检索到的关键数据。似乎我不想将对关键数据的获取向下移动到需要它的每个子组件中。我在这里使用反模式吗？

我唯一想到的另一种选择是在检索到该数据之前不调用API，但是出于可重用性的目的，这不是一种好的处理方式，并且会带来很多潜在的问题。

组件树如下：

<App> <-- useEffect hook retrieves crucial piece of data
    <Child /> <-- useEffect hook calls API with data
</App>

发生错误是因为在没有该关键数据的情况下调用了路由，但是我将其设置为一旦接收到数据就再次调用API。这不是一个好的解决方案，浪费了另一个API调用。

Answer 1

您必须下一步。

创建上下文以向子组件提供有关父级初始化的信息。

const ParentInitializeContext = React.createContext(false);

在父组件中创建布尔状态变量isInitialized，并在父组件初始化时将其设置为true。您还必须提供isInitialized到上下文：

function App(props) {
  const [isInitialized, setIsInitialized] = useState(false);

  useEffect(() => {
    //here you retreive a crucial piece of data and then call setIsInitialized(true);
  }, []);
  return (
    <ParentInitializeContext.Provider value={isInitialized}>
      {props.children}
    </ParentInitializeContext.Provider>
  );
}

在父组件初始化时创建自己的钩子以调用函数：

function useEffectWhenParentInitialized(fn, inputs = []) {
  const isParentInitialized = useContext(ParentInitializeContext);
  useEffect(() => {
    if (isParentInitialized) {
      fn();
    }
  }, [...inputs, isParentInitialized]);
}

将子组件中的useEffect钩子更改为useEffectWhenParentInitialized。

您可以在此处查看完整的示例：https://codesandbox.io/s/5volk3o2ol

有没有办法确保子组件在父组件之后触发动作？

1 个答案: