Reactjs 函数组件在每次提取时重新呈现3次

我想知道是否有人能帮忙。。。我有下面的模板/样板，我正在为一个个人学习项目工作（锁定日期！）

下面的代码加载很好…但是我添加了一个console.log，这样我就可以看到数据通过了ok，并且我注意到每10秒（我为获取设置的刷新率）它会记录数据3次（当我放入图形或视觉效果等时，会导致难看的重新渲染）

有人能帮我理解为什么每次都要重播3次吗

import React, {useState,useEffect} from 'react';
import AppContext from './context'

function App() {

  const [state,setState] = useState([])
  const [isLoading,setIsLoading] = useState(true)
  const [isError,setIsError] = useState(false)
  const appRefreshRate = 10000

  useEffect(() => {

    let interval

    const fetchData = async () => {

      setIsLoading(true)

      try {
        const res = await fetch(`myapiaddress`, {
          method: 'POST',
          mode: 'cors',
          body: JSON.stringify({
            client: 'xxx',
          }),
          headers: {
            'content-type': 'application/json',
            credentials: 'include'
          }
        })
        res.json().then(res => {
          let data = JSON.parse(res)
          setState({
            data1: data.recordsets[0],
          })
        })
      } catch (error) {
        setIsError(true)
      }
      setIsLoading(false)
    }

    fetchData()

    interval = setInterval(fetchData, appRefreshRate)
    return () => clearInterval(interval)
  }, [appRefreshRate])

  const appContext = {
    state: state
  }

console.log(state)

  return (
    <AppContext.Provider value={appContext}>
        Test
    </AppContext.Provider>
  );
}

export default App;

import React，{useState，useffect}来自“React”；
从“./context”导入AppContext
函数App（）{
const[state，setState]=useState（[]）
常量[isLoading，setIsLoading]=useState（真）
const[isError，setIsError]=useState（false）
常数appRefreshRate=10000
useffect（（）=>{
让间隔
const fetchData=async（）=>{
setIsLoading（真）
试一试{
const res=wait fetch（`myapiaddress`{
方法：“POST”，
模式：“cors”，
正文：JSON.stringify({
客户：“xxx”，
}),
标题：{
“内容类型”：“应用程序/json”，
凭据：“包括”
}
})
res.json（）.then（res=>{
让data=JSON.parse（res）
设定状态({
data1:data.Recordset[0]，
})
})
}捕获（错误）{
setIsError（真）
}
setIsLoading（错误）
}
fetchData（）
间隔=设置间隔（获取数据、appRefreshRate）
return（）=>clearInterval（间隔）
}，[appRefreshRate]）
常量appContext={
州：州
}
console.log（状态）
返回(
试验
);
}
导出默认应用程序；

组件

App

是一个函数，每次需要渲染时都会调用它

每次调用这个函数时，里面的代码都会被执行，结果是

console.log(state)

被召唤

许多事情都会触发所谓的渲染（执行函数

App（）

）

其中之一是使用

useState

hook定义的变量值的变化

每当调用更改基础变量值的setter函数时，都需要再次呈现组件，因为这些值的更改可能会导致应用程序中的不同视觉效果或状态

在本例中，您有3个修改状态的实例：

setIsLoading(true) // triggers a render

setState({ data1: data.recordsets[0] }) // triggers a render

setIsLoading(false)  // triggers a render

---

这将调用

App（）

3次，每次都使用状态变量中的更新值，因此运行

console.log（state）

指令。

非常简单！谢谢-我一定有那么一天了！：）