如何在 useEffect 中设置状态答案

【问题标题】：How to setState within useEffect如何在 useEffect 中设置状态
【发布时间】：2021-08-30 07:30:39
【问题描述】：

我想模拟在 useEffect 挂钩中获取数据，但我收到警告： React Hook useEffect 缺少依赖项：'fetchData'。

由于我只想调用这个 fetch 函数一次，它应该可以正常工作。你能帮帮我吗？

我从本地数组“获取”数据

const people = [
    { id: 1, name: 'Alex' },
    { id: 2, name: 'Ben' },
  ];

//useState hook where I want to keep fetched data

const [data, setData] = useState([]);

//simulated fetch data function

const fetchData = () => {
    setTimeout(() => {
      people.forEach(item => {
        setData(currentState => [...currentState, item]);
      })
    }, 500);
  };

//finally useEffect hook

useEffect(() => {
    fetchData();
}, []);

【问题讨论】：

这能回答你的问题吗？ How to fix missing dependency warning when using useEffect React Hook?

标签： reactjs react-hooks

【解决方案1】：

有两种可能的修复方法：

将 fetchData fn 包含到 useEffect 中，这样它就不会抱怨依赖关系。
将 fetchData fn 包含到依赖数组中，这也将在组件挂载时运行。

【讨论】：