可以使用組件內的 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是沒有意義的，因為 state 無論如何都是穩定的，直到您更改 state。

Answer 2

您使用useMemo和useEffect與 [] 的依賴關系意味着它在安裝期間運行意味着它運行一次

讓我們看看 useMemo() 是如何工作的

useMemo(()=>{

})

如果發生任何變化，它將每次運行

useMemo(()=>{

},[])

它將在組件安裝期間運行一次

  useMemo(()=>{

   },[arr])

如果arr發生任何更改，它將每次運行

如果您感到困惑，那么 useEffect() 和 useMemo() 之間有什么區別

useMemo() 僅在發現任何更改時運行，它將最新更改與以前的更改進行比較，如果發現任何更改，然后useMemo運行

如果更新的 state 與之前的 state useEffect don't care it start re render the component，則每次更改都會運行 useEffect()。