Javascript 多次使用效果渲染

我是个新手。我用

componentDidMount

编码了一个项目

现在我正在学习挂钩，并用挂钩重写这个项目。我想先获取数据并在控制台上打印。
但是，它渲染了3次。这可能是因为我在

useffect

中使用了2

setState

。但是，在其中一个中，我将数据设置为数据数组，在另一个中，我保留微调器控件的加载值。我如何使用

useffect

像

componentDidMount

一样一次性提取数据并设置状态

当我将控制台写入

useffect

时，“React Hook useffect缺少依赖项：'data.”警告并返回空列表

顺便说一句，我删除了这个模式

import React, { useState, useEffect } from "react";
import axios from "axios";

function App() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      const { data } = await axios.get("/data/data.json");
      setData(data);
      setLoading(false);
    };
    fetchData();
  }, []);
  console.log(data);
  return <div className="App">App</div>;
}

export default App;

import React，{useState，useffect}来自“React”；
从“axios”导入axios；
函数App（）{
const[data，setData]=useState（[]）；
const[loading，setLoading]=useState（false）；
useffect（（）=>{
const fetchData=async（）=>{
const{data}=wait axios.get（“/data/data.json”）；
setData（数据）；
设置加载（假）；
};
fetchData（）；
}, []);
控制台日志（数据）；
返回应用程序；
}
导出默认应用程序；

---

我认为两次使用

数据
变量可能会导致与linter冲突。您可以重命名来自API调用的数据，以防止出现警告：“React Hook useEffect缺少依赖项：'data'

组件将在每次状态更新时重新渲染，但
useffect
仅在依赖项更改时运行。因为它们不会改变，所以API调用只发生一次

为了证明这一点，您可以在
useffect
中移动
console.log（result）
，只查看一次日志。但是，请确保在
结果
上调用它，而不是
数据
，因为在调用
设置数据
后的下一次渲染之前，状态不会更新

import React, { useState, useEffect } from "react";
import axios from "axios";

function App() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      const { data: result } = await axios.get("/data/data.json");
      setData(result);
      setLoading(false);
      console.log(result); // runs once
    };
    fetchData();
  }, [setData, setLoading]);

  console.log(data); // runs 3 times
  return <div className="App">App</div>;
}

export default App;

import React，{useState，useffect}来自“React”；
从“axios”导入axios；
函数App（）{
const[data，setData]=useState（[]）；
const[loading，setLoading]=useState（false）；
useffect（（）=>{
const fetchData=async（）=>{
const{data:result}=wait axios.get（“/data/data.json”）；
设置数据（结果）；
设置加载（假）；
console.log（result）；//运行一次
};
fetchData（）；
}，[setData，setLoading]）；
console.log（数据）；//运行3次
返回应用程序；
}
导出默认应用程序；
我认为两次使用
数据
变量可能会导致与linter冲突。您可以重命名来自API调用的数据，以防止出现警告：“React Hook useEffect缺少依赖项：'data'

组件将在每次状态更新时重新渲染，但
useffect
仅在依赖项更改时运行。因为它们不会改变，所以API调用只发生一次

为了证明这一点，您可以在
useffect
中移动
console.log（result）
，只查看一次日志。但是，请确保在
结果
上调用它，而不是
数据
，因为在调用
设置数据
后的下一次渲染之前，状态不会更新

import React, { useState, useEffect } from "react";
import axios from "axios";

function App() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      const { data: result } = await axios.get("/data/data.json");
      setData(result);
      setLoading(false);
      console.log(result); // runs once
    };
    fetchData();
  }, [setData, setLoading]);

  console.log(data); // runs 3 times
  return <div className="App">App</div>;
}

export default App;

import React，{useState，useffect}来自“React”；
从“axios”导入axios；
函数App（）{
const[data，setData]=useState（[]）；
const[loading，setLoading]=useState（false）；
useffect（（）=>{
const fetchData=async（）=>{
const{data:result}=wait axios.get（“/data/data.json”）；
设置数据（结果）；
设置加载（假）；
console.log（result）；//运行一次
};
fetchData（）；
}，[setData，setLoading]）；
console.log（数据）；//运行3次
返回应用程序；
}
导出默认应用程序；
在每次状态更新后，组件将正常重新呈现。

因此，在您的示例中，它在更新
数据的值时重新呈现，在更新
加载时再次呈现

请选中此项以检查每次状态更改后渲染的发生方式：

初始渲染
加载
后
设置为
true
获取并设置
数据后
加载
后
设置为
false
每次状态更新后，组件都会正常重新呈现。

因此，在您的示例中，它在更新
数据的值时重新呈现，在更新
加载时再次呈现

请选中此项以检查每次状态更改后渲染的发生方式：

初始渲染
加载
后
设置为
true
获取并设置
数据后
加载
后
设置为
false
useffect
没有多次运行，是组件在重新渲染。重新渲染本身没有什么问题，但在这种情况下，过程是（1）组件渲染（2）useEffect运行，调用
fetchData
（3）
fetchData
调用
setData
（4）组件第二次渲染，因为
data
已更改。此代码是否正常工作？如何运行一次？它似乎是正确的。对
控制台的多次调用。log
不是一个错误，这是意料之中的。您有两个
数据
变量（一个来自
useState
，另一个用于API调用）。这可能会引起冲突。我建议更改一个的名称。&加拉布拉我想你和问题所有者一样困惑。。。再次阅读注释。
useffect
没有运行多次，是组件重新渲染。重新渲染本身没有什么问题，但在这种情况下，过程是（1）组件渲染（2）useEffect运行，调用
fetchData
（3）
fetchData
调用
setData
（4）组件第二次渲染，因为
data
已更改。此代码是否正常工作？