无法使用 setstate 钩子复制数组

Question

每当我尝试更新未更新的挂钩时，我都会使用 axios 从后端获取数据。数据是 JSON，我从中提取数据并尝试设置元素。听起来可能很傻，但有人能告诉我什么是依赖数组吗？

我一直收到
第 18 行：React Hook useEffect 缺少依赖项：'elements'。包括它或删除依赖数组 react-hooks/exhaustive-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;