1

我正在尝试渲染必须通过的数据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>}

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

4

2 回答 2

4

数据未更新，因为您缺少依赖数组中的值。

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

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

于 2021-04-26T14:52:50.820 回答
0

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

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

useMemo(()=>{

})

如果发生任何变化，它将每次运行

useMemo(()=>{

},[])

它将在组件安装期间运行一次

  useMemo(()=>{

   },[arr])

如果arr发生任何更改，它将每次运行

如果您感到困惑，那么 useEffect() 和 useMemo() 之间有什么区别

useMemo() 仅在发现任何更改时运行，它将最新更改与以前的更改进行比较，如果发现任何更改，然后useMemo运行

如果更新的状态与先前的状态相同，则每次更改都会运行 useEffect() useEffect don't care it start re render the component。

于 2021-04-26T15:06:47.927 回答