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的{{1}}版本

useState

缺少的依赖警告来自setElements(elements => [...elements, data])

console.log(elements)

Answer 2

Missing dependency警告是因为您在useEffect中使用了console.log(elements)。而且您的元素日志未显示最新结果，因为状态尚未更改

只需添加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;

回答您的问题；

依赖数组是让React知道何时应该触发useEffect的依赖数组。因此，我添加的useEffect仅在其依赖项elements更改时触发。

Answer 3

在您的情况下，您将数组数据放在元素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;

无法使用setstate钩子复制数组

3 个答案: