在此错误消息中“将此变量直接移动到 useEffect 中”是什么意思？

IT技术 reactjs react-hooks use-effect
2021-05-17 02:14:17

我试图通过props将对象传递给子组件。该值在 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 中”

2个回答

关于useEffect钩子：

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

这意味着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;

这个警告——“React Hook useEffect 内部对‘users’变量的赋值将在每次渲染后丢失——这就是 React 中存在状态概念的原因。React 组件不会在连续的重新生成过程中保留普通 javascript 变量的值-renders（组件生命周期）。这就是react状态的帮助，以便在组件重新渲染时状态的更改可以反映在 DOM 中。

其它你可能感兴趣的问题
上一篇如何在 React.js 中使用带有 div 的 onClick 下一篇3D 打印部件的熔化温度是多少？