В React Hook useEffect отсутствует зависимость при передаче реквизита с помощью React Hook

Итак, я пытаюсь использовать эффект для передачи компонента из избыточности, вот мой код:

const initState = {
    newAttribs: { ...props.state.Auth },
  };

  const [userList, setUserList] = useState(initState);

  useEffect(() => {
    setUserList({ ...userList, newAttribs: { ...props.state.Auth } });
  }, [props.state.Auth]);

  console.info("userList now", userList);

но он продолжает получать мне предупреждение в консоли:

WARNING in [eslint]
src\pages\Login.jsx
  Line 15:6:  React Hook useEffect has a missing dependency: 'userList'. Either include it or remove the dependency array. You can also do a functional update 'setUserList(u => ...)' if you only need 'userList' in the 'setUserList' call  react-hooks/exhaustive-deps

Может кто-нибудь объяснить мне, где я сделал неправильно здесь....

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
75
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ваш хук эффекта зависит от userList, но он не включен в массив зависимостей. Одной полезной альтернативой является использование формы функции обратного вызова установщика состояния:

setUserList(userList => (
  { ...userList, newAttribs: { ...props.state.Auth }) }
);

можно подробнее...

JS24 23.11.2022 03:25

это работает, но, кажется, он не понимает..

JS24 23.11.2022 03:26

Вы используете userList внутри эффекта, поэтому обязательно включите его в массив зависимостей, чтобы убедиться, что эффект работает с его текущим значением. Функциональная форма установщика избавляется от этой зависимости, поскольку функция определена внутри тела эффекта (и всегда будет ссылаться на текущую версию состояния).

Nick 23.11.2022 03:28

Другие вопросы по теме