Javascript 无法使用setstate挂钩复制阵列

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

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

import React，{useffect，useState}来自“React”；
导入“/App.css”；
从“axios”导入axios；
函数App（）{
const[elements，setElements]=useState（[]）；
useffect（（）=>{
const res=async（）=>{
const result=wait axios.get（'/data'）；
常数数据=结果数据；
控制台日志（数据）；
setElements（elements=>[…elements，data]）；
控制台日志（元素）；
};
res（）；
}, []);
log（elements.map（element=>console.log（element））；
回复你好；
}
导出默认应用程序；

只需

控制台。在
效果之外记录
。您已经在使用
更新程序
版本的
useState

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

缺少依赖性警告来自控制台.log（元素）

import React，{useffect，useState}来自“React”；
导入“/App.css”；
从“axios”导入axios；
函数App（）{
const[elements，setElements]=useState（[]）；
useffect（（）=>{
const res=async（）=>{
const result=wait axios.get（'/data'）；
常数数据=结果数据；
控制台日志（数据）；
setElements（elements=>[…elements，data]）；
};
res（）；
}, []);
控制台日志（元素）；
回复你好；
}
导出默认应用程序；
缺少依赖项
警告是因为您在useEffect中使用了
控制台.log（元素）
。
您的元素日志未显示最新结果，因为状态未更改（尚未更改）

只需添加一个
useffect
即可跟踪元素的更改，如下所示

 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;

函数应用程序（）{
const[elements，setElements]=useState（[]）；
useffect（（）=>{
const res=async（）=>{
const result=wait axios.get（'/data'）；
常数数据=结果数据；
控制台日志（数据）；
setElements（elements=>[…elements，data]）；
};
res（）；
}, []);
useffect（（）=>console.log（元素），[elements]）
回复你好；
}
导出默认应用程序；

回答你的问题

依赖关系数组用于告知何时应触发本例中的useEffect。因此，我添加的useEffect仅在其依赖项
元素
更改时触发。
在您的示例中，您将数组数据放在元素中，
setElements（elements=>[…elements，data]）所以它将是数组中的数组。
请尝试以下方法：

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, data]);
    };
    res();
  }, []);

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

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

export default App;

函数应用程序（）{
const[elements，setElements]=useState（[]）；
useffect（（）=>{
const res=async（）=>{
const result=wait axios.get（'/data'）；
常数数据=结果数据；
控制台日志（数据）；
setElements（[…元素，数据]）；
};
res（）；
}, []);
useffect（（）=>console.log（元素），[elements]）
回复你好；
}
导出默认应用程序；
通常，当异步函数完成后设置状态时，当我试图显示从mongo db获取的数据时，您必须感谢tipAlso，因为我无法获取数据。我做了console.log（elements.map（element=>console.log（element））；External useEffect给出了未定义的原因？您试图将数据记录到哪里？你能用这个问题更新这个问题（或发布另一个问题）吗？外部使用效果基本上我希望每个数据都显示在页面上，但我一直失败用代码更新问题或共享沙箱，我会看一看。我相信这是一个小问题，我会把它作为一个新问题发布。当然，这是完全有道理的。当元素发生变化时，应该触发第二个钩子，我们要在这里休息的第一个钩子；）当然，第二个现在仅用于演示目的，用于记录更新的元素，但仍然是。它与具有相似的多个useState相同。
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, data]);
    };
    res();
  }, []);

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

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

export default App;