Блог

Я получил предупреждающее сообщение после того, как создал функцию для установки значений данных текущего пользователя loggedin и вызвал ее в useEffect. Вот код:

 import React, { useEffect, useState } from "react";
...

const AddPost = () => {
  const userStorage = sessionStorage.getItem('user');
  const [values, setValues] = useState({
    userId: '',
    authorName: '',
    title: '',
    content: '',
    likes: '',
    dislikes: ''
  });

  useEffect(() => {
    getCurrentUserInfo();
  },[]);

  const getCurrentUserInfo = () => {
    if(userStorage !== null) {
      setValues({
        ...values,
        userId: userStorage.id,
        authorName: userStorage.userName,
      })
    }
  }
  ...
export default AddPost;
  

я просто хочу установить userId и AuthorName из данных пользователя, вошедшего в систему, поэтому в функции setValues
я получаю все начальные значения, затем я обновляю только userId и AuthorName.
И вдруг в консоли моего браузера появляется предупреждающее сообщение, в котором говорится

 React Hook useEffect has a missing dependency: 'getCurrentUserInfo'. Either include it or remove the dependency array
  

я пытаюсь удалить [] in useEffect , но это вызывает задержку в моем браузере, потому useEffect что вызывается циклическая функция.
я пытаюсь добавить values и userStorage или один из них внутри [] , все еще безуспешно.
есть ли какие-либо решения для этого?

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

Чтобы избежать этого, вы можете определить getCurrentUserInfo внутри крючка useEffect и не указывать это как зависимость. Вы также можете использовать шаблон обратного вызова для обновления состояния, чтобы избежать значений как зависимости, и вам все равно нужно будет предоставить userStorage как зависимость. И для userStorage вы можете запомнить это значение с помощью useMemo, чтобы оно не вызывало повторных отправлений.

      const userStorage = useMemo(() => sessionStorage.getItem('user'), [sessionStorage]);

      useEffect(() => {
        const getCurrentUserInfo = () => {
        if(userStorage !== null) {
          setValues(values => ({
            ...values,
            userId: userStorage.id,
            authorName: userStorage.userName,
          }))
        }
      }

        getCurrentUserInfo();
      },[userStorage]);
    
  
  

   useEffect(() => {
    getCurrentUserInfo();
  },[getCurrentUserInfo]);
  

Вы должны добавить функцию внутри массива зависимостей. Но обратите внимание, что это необязательно, если вы не добавите его в массив, он просто запустится один раз. Когда вы добавляете его в массив, он будет запускаться всякий раз, когда функция обновляется, что в данном случае будет один раз.

Официальная документация react:

Если вы используете эту оптимизацию, убедитесь, что массив включает все значения из области видимости компонента (например, props и state), которые меняются со временем и которые используются эффектом.

[РЕШИТЬ]

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

 useEffect(() => {
  if(userStorage !== null) {
    setValues({
      ...
    })
  }
},[]);
  

и внутри setValues я ставлю так

 setValues(values => ({
  ...values,
  userId: userStorage.id,
  authorName: userStorage.userName,
}))
  

затем окончательный код выглядит следующим образом

 useEffect(() => {
  if(userStorage !== null) {
    setValues(values => ({
      ...values,
      userId: userStorage.id,
      authorName: userStorage.userName,
    }))
  }
},[]);