是否可以在组件内使用 useEffect 更新 useMemo 记忆值？

Question

我正在尝试呈现必须通过 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>}

那么这可以在单个组件中工作吗？还是必须创建自定义挂钩？

Answer 1

数据未更新，因为您在依赖项数组中缺少一个值。

const data = React.useMemo(() => accounts, [accounts]);

因此在这种情况下，使用 useMemo 没有意义，因为状态无论如何都是稳定的，直到您更改状态。

Answer 2

你使用 useMemo 和 useEffect 与 [] 的依赖意味着它运行在安装期间意味着它运行一次

让我们看看 useMemo() 是如何工作的

每次有变化都会运行

useMemo(()=>{

})
组件挂载时运行一次

useMemo(()=>{

},[])
如果arr
有变化，每次都会运行
useMemo(()=>{

},[arr])

如果您对 useEffect() 和 useMemo() 之间的区别感到困惑

useMemo() 只有运行当它发现任何变化时，它会将最新的变化与以前的变化进行比较，如果它发现任何变化，那么 useMemo 运行

useEffect() 是运行如果更新后的状态与以前的状态相同，useEffect 不关心它开始重新渲染组件。

是否可以在组件内使用 useEffect 更新 useMemo 记忆值？

Can a useMemo memoized value be updated with useEffect from within the component?

reactjs

use-effect

react-usememo