在此错误消息中“将此变量直接移动到 useEffect 中"是什么意思? [英] What does it mean to 'move this variable directly inside useEffect' in this error message?

问题描述

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

I am attempting to pass an object through props to a child component. The value is set in the useEffect hook and lost when passed to my child component.

我已经尝试在一个单独的函数中设置 useEffect 钩子之外的对象的值，但该值仍然丢失.

I have tried setting the value of the object outside the useEffect hook in a separate function but the value is still lost.

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' } 而不是空对象 {}.

I expected props.users to be { user: 'bob' } and not an empty object {}.

错误信息是:

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

"Assignments to the 'users' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect react-hooks/exhaustive-deps"

推荐答案

关于useEffect钩子:

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

By using this Hook, you tell React that your component needs to do something after render. React will remember the function you passed (we’ll refer to it as our "effect"), and call it later after performing the DOM updates. more

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

This means that function inside useEffect will be called after rendering of the component. That's why you have an empty object.

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

About the error. You have it because React doesn't remember your users variable - it will be recreated on each render of SetValue component. It will be better to use useState hook to set value in useEffect and remember it on the next render.

还有一张纸条.不要忘记在 useEffect 中传递带有依赖项数组的第二个参数.现在您的钩子将在每次渲染 SetValue 组件后调用.

And one more note. Don't forget about passing the second argument in useEffect with an array of dependencies. Now your hook will be called after each render of SetValue component.

以下是如何使用 useState 钩子:

Here's how to use useState hook:

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;

这篇关于在此错误消息中“将此变量直接移动到 useEffect 中"是什么意思?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！