如何在子组件中使用 useEffect() 来获取数据

Question

我想知道仅在子组件包含在父组件中时才在子组件中使用useEffect来加载数据是否有意义(或可能(。

在子组件中，我有以下代码：

useEffect(() => {
    if (props.rubricItems.length < 1)
        props.fetchRubricsData(courseId);        
}, [])

但这不会触发任何呼叫。

您是否建议我获取父组件中的所有数据？我不想这样做以避免加载未使用的数据。有什么建议吗？

Answer 1

但这不会触发任何呼叫。

为什么会这样？

发生这种情况的原因是您有一个空的依赖数组[]。这意味着它只会在安装组件时运行，并且永远不会运行更多(如componentDidMount(。而且因为它只运行一次，在这段时间里，props.rubricItems.length < 1是错误的。

仅当子组件包含在父组件中时才加载数据

如果您有某种逻辑来决定是否呈现子组件，则可以在父组件中添加一个将调用该 fetch 的useEffect。

例如

您根据某个变量呈现组件。

{ foo && <ChildComponent />}

因此，您可以添加一个useEffect，该该foo值更改时将运行。

useEffect(() => {
    if(foo){ // you can add you logic here
        // fetch the data
    }
}, [foo]) // it will only run this when foo changes