Что означает «переместить эту переменную непосредственно в 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 '}, а не пустой объект {}.

Сообщение об ошибке:

"Назначения переменной' users 'внутри React Hook useEffect будут потеряны после каждого рендеринга. Для сохранениязначение со временем, сохраните его в хуке useRef и сохраните изменяемое значение в свойстве '.current'. В противном случае вы можете переместить эту переменную непосредственно в useEffect response-hooks / expustive-deps "

Answer 1

О useEffect hook:

Используя этот хук, вы сообщаете React, что ваш компонент должен что-то делать после рендеринга.React запомнит переданную вами функцию (мы будем называть ее «эффектом») и вызовет ее позже после выполнения обновлений DOM. more

Это означает, что функция внутри useEffect будет вызываться после рендеринга компонента.Вот почему у вас есть пустой объект.

Об ошибке.У вас это есть, потому что React не запоминает вашу переменную users - она ​​будет воссоздана при каждом рендере компонента SetValue.Будет лучше использовать хук useState для установки значения в useEffect и запомнить его при следующем рендере.

И еще одна заметка.Не забудьте передать второй аргумент в useEffect с массивом зависимостей.Теперь ваш хук будет вызываться после каждого рендера компонента SetValue.

Вот как использовать 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;

Answer 2

Это предупреждение: «Назначения переменной« users »из React Hook useEffect будут потеряны после каждого рендеринга - это причина, по которой концепция состояния существует в React. Компонент React не сохраняет значение обычных переменных javascriptво время последовательных повторных визуализаций (жизненный цикл компонента). Именно в этом случае помогает состояние реакции, чтобы изменения в состоянии могли отражаться в DOM, если компонент выполняет повторную визуализацию.