我想知道是否只有在子组件包含在父组件中时,才在子组件内部使用useEffect
来加载数据。
在子组件内部,我有以下代码:
useEffect(() => {
if (props.rubricItems.length < 1)
props.fetchRubricsData(courseId);
}, [])
但这不会触发任何呼叫。
您是否建议我获取父组件中的所有数据?我不想做以避免加载未使用的数据。有什么建议吗?
答案 0 :(得分:1)
但这不会触发任何呼叫。
为什么会这样?
发生这种情况的原因是因为您有一个空的依赖项数组[]
。这意味着它将仅在安装组件时运行,再也不会运行(例如componentDidMount
)。而且由于它只运行一次,因此props.rubricItems.length < 1
是错误的。
仅当子组件包含在父组件中时才加载数据
如果您有某种逻辑决定是否渲染子组件,则可以在父组件中添加一个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