渲染期间运行的 useMemo 函数答案

【问题标题】：useMemo function running during rendering渲染期间运行的 useMemo 函数
【发布时间】：2025-04-27 03:05:01
【问题描述】：

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

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

错误：

myArray 未定义

【问题讨论】：

标签： javascript arrays json reactjs

【解决方案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)

【讨论】：

但是 useCallBack 会给我与 useMemo 相同的功能吗？记忆值
是的，但您可以稍后将其作为函数调用：myMemoFunction(arr) 并且它不像常规函数那样在渲染时调用。
const callFunc = useCallback((registers) => { myMemoFunction(registers) }) 我基本上是这样做的，但它不起作用，返回相同的错误
myMemoFunction 在使用 useMemo 时不能接受参数。我在响应中添加了示例。
那么这是否意味着如果我使用相同的参数多次调用 myMemoFunction() 函数就不需要重新处理？

【解决方案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 变量初始化为数组总是好的，例如 []

【讨论】：