Что означает "переместить эту переменную непосредственно в 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 Hook и сохраните изменяемое значение в свойстве '.current'. В противном случае вы можете переместите эту переменную прямо в useEffect реагировать на крючки / исчерпывающе "

Answer 1

Около useEffect крюк:

Используя этот хук, вы сообщаете 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

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

Answer 3

Простое решение этой проблемы, которое я нашел, заключалось в объявлении переменной, используемой вuseEffectперехват за пределами объявления функции, т.е.

      import React, { useState, useEffect } from 'react';

let users = {};  // variable declaration outside of the component declaration

function SetValue(props) {
    useEffect(() => {
          users = { user: 'bob' };
    })        

    return <NewComponent users={users} />
}

export default SetValue;

Попробуйте, так как это решило проблему для меня.