问题描述
我正在尝试呈现必须通过 useMemo
传递的数据。我从 api 调用中获取数据,因此我调用了 useEffect
。初始渲染工作返回一个空数组,但一旦我调用 api,数据就不会更新。
import React from 'react'
import {fetchAccounts} from '../utils/api'
export default function Accounts() {
const [accounts,setAccounts] = React.useState([])
React.useEffect(() => {
setLoading(true)
fetchAccounts().then((data) => {
setAccounts(data)
})
},[])
const data = React.useMemo(() => accounts,[])
return <p>{JSON.stringify(data)}</p>}
那么这可以在单个组件中工作吗?还是必须创建自定义钩子?
解决方法
数据未更新,因为您缺少依赖项数组中的值。
const data = React.useMemo(() => accounts,[accounts]);
因此,在这种情况下,使用 useMemo
是没有意义的,因为无论如何状态都是稳定的,直到您更改状态。
您使用 useMemo 和 useEffect 与 [] 的依赖关系意味着它在挂载期间运行意味着它运行一次
让我们看看 useMemo() 是如何工作的
useMemo(()=>{
})
每次发生变化都会运行
useMemo(()=>{
},[])
它会在组件安装期间运行一次
useMemo(()=>{
},[arr])
如果arr
发生任何变化,它每次都会运行如果你有疑惑 useEffect() 和 useMemo() 的区别是什么
useMemo() 仅在找到任何更改时才运行,如果找到任何更改,则将最新更改与之前的更改进行比较,然后 useMemo 运行
如果更新的状态与之前的状态相同,则每次更改都会运行 useEffect(),useEffect 不关心它是否开始重新渲染组件。