在此错误消息中“直接在 useEffect 中移动此变量”是啥意思?

Posted

技术标签:

【中文标题】在此错误消息中“直接在 useEffect 中移动此变量”是啥意思?【英文标题】:What does it mean to 'move this variable directly inside useEffect' in this error message?在此错误消息中“直接在 useEffect 中移动此变量”是什么意思? 【发布时间】:2019-10-02 23:43:19 【问题描述】:

我正在尝试通过道具将对象传递给子组件。该值在 useEffect 挂钩中设置,并在传递给我的子组件时丢失。

我尝试在单独的函数中设置 useEffect 挂钩之外的对象的值,但该值仍然丢失。

import React,  useState, useEffect  from 'react';

function SetValue(props)

    let users = ;

    useEffect(() => 
          users =  user: 'bob' ;
    )        

    return <NewComponent users=users />


export default SetValue;

我希望 props.users 是 user: 'bob' 而不是空对象 。

错误信息是:

“从 React Hook useEffect 内部分配给'users'变量的分配将在每次渲染后丢失。要随着时间的推移保留该值,请将其存储在 useRef Hook 中并将可变值保留在 '.current' 属性中。否则, 你可以直接在 useEffect react-hooks/exhaustive-deps 里面移动这个变量

【问题讨论】:

【参考方案1】:

关于useEffect钩子:

通过使用这个 Hook,你告诉 React 你的组件需要在渲染后做一些事情。 React 会记住您传递的函数(我们将其称为“效果”),并在执行 DOM 更新后稍后调用它。 more

这意味着useEffect 中的函数将在组件渲染后被调用。这就是为什么你有一个空对象。

关于错误。你拥有它是因为 React 不记得你的 users 变量 - 它会在每次渲染 SetValue 组件时重新创建。最好使用useState 钩子在useEffect 中设置值并在下次渲染时记住它。

还有一个注意事项。不要忘记传递 useEffect 中的第二个参数和一组依赖项。现在你的钩子会在每次渲染SetValue 组件后被调用。

下面是useState钩子的使用方法:

import React,  useState, useEffect  from 'react';

function SetValue(props)

    const [users, setUsers] = useState();

    useEffect(() => 
          setUsers( user: 'bob' );
    , [
       //here you could pass dependencies, or leave it empty to call this effect only on first render
    ]);        

    return <NewComponent users=users />


export default SetValue;

【讨论】:

【参考方案2】:

这个警告——“每次渲染后,从 React Hook useEffect 内部对 'users' 变量的分配将丢失——是 React 中存在状态概念的原因。React 组件不保留普通 javascript 变量的值在整个连续的重新渲染(组件生命周期)中。这就是反应状态的帮助,以便在组件重新渲染时对状态的更改可以反映在 DOM 中。

【讨论】:

以上是关于在此错误消息中“直接在 useEffect 中移动此变量”是啥意思?的主要内容,如果未能解决你的问题,请参考以下文章

在另一台 PC 上出现错误消息“禁止您无权访问 / 在此服务器上”

我收到错误消息:在此设置小部件上方找不到正确的 Provider<User>(已修复)

querydefs 运行时错误 3265:在此集合中找不到项目

错误:NullPointerAccess:变量“”在此位置只能为空

在此模型中找不到名为“Book”的实体。 ios核心数据错误?

在 Paypal 集成中收到错误消息