渲染期间运行的 useMemo 函数

Question

基本上我想要做的是在我的代码的一部分中调用这个'myMemoFunction'函数。 问题是，从我在文档中读到的内容useMemo() ， useMemo()在渲染时执行此函数，因此myArray参数仍然为空。 然后它返回下面的错误。

const myMemoFunction = useMemo((myArray) => {
    const users = myArray.map((a) => a.user)
    return users;
})

错误：

myArray 未定义

Answer 1

在这种情况下，您应该使用useCallback ，因为useMemo记住一个变量。 我也怀疑它可以接受论据。

编辑：

const myMemoFunction = useCallback((myArray) => {
    // this won't be called on renders
    const users = myArray.map((a) => a.user)
    return users;
}, [] /* dont forget the dependency you want to evaluate only once */)

// later
myMemoFunction(arr);

使用 useMemo 编辑 2：

const myMemoVariable = useMemo(() => {
    // re-evaluates each time myArray changes
    const users = myArray.map((a) => a.user)
    return users;
}, [myArray])

// note that we dont use myMemoVariable() to get our variable
console.log(myMemoVariable)

Answer 2

将您的代码更新为此

const myMemoFunction = useMemo((myArray) => {

// myArray could be undefined, that was why ? was added

    const users = myArray?.map((a) => a.user)

    return users;

}, [myArray]) // myArray is in a dependency of the function

您的备忘录功能将使用新的myArray变量进行更新

将 myArray 变量初始化为数组总是好的，例如 []