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

Question

我正在尝试通过道具将对象传递给子组件。该值在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内部对usesfffect的'users'变量的分配都将丢失。要随时间保留该值，请将其存储在useRef Hook中，并将可变值保留在'.current'属性中。否则，您可以在useEffect react-hooks / exhaustive-deps中直接移动此变量”

Answer 1

关于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;

Answer 2

这个警告——“React Hook useEffect 内部对‘users’变量的赋值将在每次渲染后丢失——是 React 中存在状态概念的原因。React 组件不会在连续的 re 中保留正常 javascript 变量的值。 -renders(组件生命周期)。这就是反应状态的帮助之处，这样如果组件重新渲染，状态的更改可以反映在 DOM 中。