Невозможно скопировать массив, используя перехват установки

Question

Я получаю данные из бэкэнда, используя axios всякий раз, когда пытаюсь обновить хуки, которые он не обновляет. Данные в формате JSON, откуда я извлекаю данные и пытаюсь установить элемент. Это может звучать глупо, но может кто-нибудь сказать мне, что такое зависимый массив?

Я продолжаю получать это
Строка 18: React Hook useEffect отсутствует зависимость: «elements». Либо включите его, либо удалите массив зависимых реактив-хуков / исчерпывающий-deps

Вот код

import React, { useEffect, useState } from 'react';
import './App.css';
import axios from 'axios';

function App() {
  const [elements, setElements] = useState([]);

  useEffect(() => {
    const res = async () => {
      const result = await axios.get('/data');
      const data = result.data;
      console.log(data);
      setElements(elements => [...elements, data]);
      console.log(elements);
    };
    res();
  }, []);
 console.log(elements.map(element => console.log(element)));
  return <div className='App'>Hello</div>;
}

export default App;

Answer 1

Просто console.log вне вашего effect. Вы уже используете updater версию useState

 setElements(elements => [...elements, data])

Отсутствует предупреждение о зависимости от console.log(elements)

import React, { useEffect, useState } from 'react';
import './App.css';
import axios from 'axios';

function App() {
  const [elements, setElements] = useState([]);

  useEffect(() => {
    const res = async () => {
      const result = await axios.get('/data');
      const data = result.data;
      console.log(data);
      setElements(elements => [...elements, data]);
    };
    res();
  }, []);

  console.log(elements);

  return <div className='App'>Hello</div>;
}

export default App;

Answer 2

Missing dependency предупреждение, потому что вы используете console.log(elements) внутри useEffect. И ваш журнал элементов не показывает последний результат, потому что состояние не изменилось (пока)

Просто добавьте useEffect, чтобы отслеживать изменения элементов, как показано ниже.

 function App() {
  const [elements, setElements] = useState([]);

  useEffect(() => {
    const res = async () => {
      const result = await axios.get('/data');
      const data = result.data;
      console.log(data);
      setElements(elements => [...elements, data]);
    };
    res();
  }, []);

  useEffect(() => console.log(elements), [elements])

  return <div className='App'>Hello</div>;
}

export default App;

Чтобы ответить на вашquestion;

Массив зависимостей предназначен для того, чтобы React знал, когда должен быть запущен useEffect в этом случае. Поэтому добавленный мной useEffect срабатывает только при изменении его зависимости elements.