javascript - 无法使用 setstate Hook 复制数组

Question

每当我尝试更新未更新的 Hook 时，我都会使用 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 之外。您已经在使用 useState

的 updater 版本

 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;