异步使用状态无限重新渲染

Question

我正在为与 api 交互的项目创建一个 React js 应用程序。我从 api 得到一个数组，这些值是 google 地图引脚。我想在这里做的是：用户设置一个数据区间，并且在地图上显示该数据区间内的所有引脚。

我有这个 js 代码来设置一切：

//above is the function that receives two dates and returns the interval, not relevant here
var pinsdata = [];

  useEffect(()=>{
    axios.get('MYAPILINK')
    .then(res=>{

      var arraydatas = getDates(data1, data2)
      for(var i = 0; i < res.data.data.length; i++)
      {
        if(arraydatas.includes(res.data.data[i].data_pg))
        {
          pinsdata.push(res.data.data[i])
        }
      }
      setPorra(pinsdata)
    })
  }, [porra])

现在我在 return 上只有这个（我现在只是在测试这个）：

    <div>
        <DatePicker selected={startDate} onSelect={(date) => setStartDate(date)} dateFormat="dd-MM-y"/>
          &emsp;
        <DatePicker selected={startDate2} onSelect={(date2) => setStartDate2(date2)} dateFormat="dd-MM-y"/>
        <ul>
          {porra.map(pinsdata =>{
            return(<li>{pinsdata.id_pg}</li>)
          })}
        </ul>
    </div>

所以...这里似乎一切正常：我设置了两个日期，并在页面上显示的数据间隔内获得了所有 markers/pins。

问题：

我的页面正在无限期地重新呈现...我的 console.log 会在我刷新页面时立即收到垃圾邮件，当我将 google 地图添加到页面时，它甚至不可用，因为页面每秒都会重新呈现。现在...我知道这是因为 useState，但是我怎样才能在没有使用状态的情况下进行呢？因为 api 请求是异步的，所以当我从 api...

得到答案时我必须重新渲染

Answer 1

尝试从依赖项数组中删除 porra 并添加两个日期（startDate 和 startDate2）作为依赖项。

  useEffect(()=>{
    axios.get('MYAPILINK')
    .then(res=>{

      var arraydatas = getDates(data1, data2)
      for(var i = 0; i < res.data.data.length; i++)
      {
        if(arraydatas.includes(res.data.data[i].data_pg))
        {
          pinsdata.push(res.data.data[i])
        }
      }
      setPorra(pinsdata)
    })
  }, [startDate, startDate2])

当您在 useEffect 中调用 setPorra 时，它会创建一个无限循环。

Answer 2

您的依赖项数组不正确，您应该在其中包含 data1 和 data2 -

var pinsdata = [];

  useEffect(()=>{
    axios.get('MYAPILINK')
    .then(res=>{

      var arraydatas = getDates(data1, data2)
      for(var i = 0; i < res.data.data.length; i++)
      {
        if(arraydatas.includes(res.data.data[i].data_pg))
        {
          pinsdata.push(res.data.data[i])
        }
      }
      setPorra(pinsdata)
    })
  }, [data1, data2])

前提是你想在data1或data2变化时运行这个效果，否则数组留空，只会运行一次，当组件安装

异步使用状态无限重新渲染

Async use-state infinite re-rendering

javascript

reactjs

use-effect

use-state