可以使用组件内的 useEffect 更新 useMemo 记忆值吗？

如何解决可以使用组件内的 useEffect 更新 useMemo 记忆值吗？

我正在尝试呈现必须通过 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 不关心它是否开始重新渲染组件。