reactjs - 如何在子组件中使用 useEffect() 来获取数据?
问题描述
useEffect
我想知道仅当子组件包含在父组件中时才在子组件内部使用来加载数据是否有意义(或可能) 。
在子组件中,我有以下代码:
useEffect(() => {
if (props.rubricItems.length < 1)
props.fetchRubricsData(courseId);
}, [])
但这不会触发任何呼叫。
您是否建议我获取父组件中的所有数据?我不想这样做以避免加载未使用的数据。有什么建议么?
解决方案
但这不会触发任何呼叫。
为什么会发生这种情况?
发生这种情况的原因是因为您有一个空的依赖数组[]
。这意味着它只会在安装组件时运行,并且永远不会运行(如componentDidMount
)。而且因为它只运行一次,在那个时候,props.rubricItems.length < 1
是错误的。
仅当子组件包含在父组件中时才加载数据
如果您有某种逻辑来决定是否渲染子组件,则可以useEffect
在调用该 fetch 的父组件中添加一个。
例如
您根据某些变量渲染组件。
{ 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
推荐阅读
- pytorch - How do I flatten a tensor in pytorch?
- php - 无法从 php 脚本向 android 应用程序发送通知
- javascript - 当我专注于输入标签时,移动键盘向上移动
- php - 使用 PHP MYSQLi 如何仅使用 action_type DR 和 CR 管理债务人和债权人
- oracle - 从查询中获取列名(不是从表中)
- amazon-web-services - 如何在 AWS Api 网关映射模板中使用 IF 条件。我可以在不使用 foreach 的情况下使用 if 条件吗?
- android - google-api-client-android 和 firestore 给出 DexArchiveMergerException 构建错误
- c# - 将点从一个三角形转换为另一个三角形
- java - Jenkins 测试邮件配置错误。java连接错误
- python - Tkinter 中的无限循环