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

Question

我想知道仅当子组件包含在父组件中时，在子组件内部使用 useEffect 加载数据是否有意义（或可能）。

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

useEffect(() => {

    if (props.rubricItems.length < 1)
        props.fetchRubricsData(courseId);        

}, [])

但这不会触发任何调用。

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

Answer 1

But this does not trigger any call.

为什么会这样？

发生这种情况的原因是你有一个空的依赖数组[]。这意味着它只会在安装组件时运行而不会更多（如 componentDidMount ）。而且因为它只运行一次，那一次， props.rubricItems.length < 1 是假的。

load data only when the child component is included in the parent compnent

如果您有某种逻辑来决定是否呈现子组件，您可以在将调用该提取的父组件中添加一个 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

How to use useEffect() inside a child component to fetch data?