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更新后稍后调用它。 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;

Answer 2

此警告-“在每次渲染后，从React Hook useEffect内部分配给'users'变量的信息都会丢失-这是React中存在状态概念的原因。React组件不会保留普通javascript变量的值

在整个后续连续重新渲染（组件生命周期）中，反应状态会有所帮助，以便在组件重新渲染时状态更改可以反映在DOM中。

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

2 个答案: