多个组件使用useEffect钩子的最佳实践
多个组件使用useEffect钩子的最佳实践
提问于 2021-01-27 08:31:13
我是新来的反应。我正在开发一个学习项目，但我在使用useEffect钩子方面遇到了困难。
在Dashboard component中，我调用一个nodejs，它返回一个用户列表，如示例中所示：
Users : [{
"name": "john",
"age": 30
}, ... ]我想要做的是将年龄列表传递给age component，将名称列表传递给name component来执行一些操作，比如显示列表和图表。
现在，我在父组件(仪表板组件)中进行了调用，通过道具将单独的数组传递给子组件(年龄和名称组件)。
问题在于，由于react和javascript的异步性，子组件是在api调用结束之前挂载的，导致错误。
我想知道在这种情况下使用的最佳实践是什么。
- 可以在父组件中调用api，然后在组件之间排序数据吗？在这种情况下，我应该如何等待子组件加载？
- ，还是应该在每个子组件中进行两个单独的调用？这会有性能repercussions?
吗？
代码示例
仪表板组件
const [users, setUsers] = useState([])
useEffect(()=>{
//api call and update users state
}, [])
//process users and create array of names and ages
return (
<Age names={names} />
<Name ages={ages} />
)名称组件
export default function Name(props) {
return (
props.names.map(name => {
<p>{name}</p>
})
)
}提前感谢您的建议和帮助。
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-01-27 10:36:09
由于users似乎是状态的单个“块”，一个包含具有age和name属性的对象的数组，那么父组件将需要保持状态。从父级发出一个API/异步调用来更新任何状态。
您可以将状态“映射”/“筛选”到两个数组中，作为道具传递给子组件。这可以在你通过道具的时候“飞起来”。当父状态更新时，将传递最新的状态值。
const [users, setUsers] = useState([])
useEffect(()=>{
//api call and update users state
}, [])
return (
<>
<Age names={users.map(({ name }) => name)} />
<Name ages={users.map(({ age }) => age)} />
</>
)每个孩子都可以像往常一样映射他们收到的数组。array.prototype.map可以在没有问题的情况下处理空数组，因此没有什么特殊的事情需要处理初始/空状态(除非您愿意)。只要父数组中的users状态是一个定义的数组，array.map就可以保证返回一个数组。
export default function Name({ names }) {
return names.length ? names.map(name => <p>{name}</p>) : "...Loading";
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65915429
复制相关文章
相似问题
腾讯云开发者
