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

【问题标题】：Async use-state infinite re-rendering异步使用状态无限重新渲染
【发布时间】：2021-09-16 03:33:45
【问题描述】：

我正在为一个与 api 交互的项目创建一个 react js 应用程序。我从 api 中得到一个包含值的数组，这些值是谷歌地图引脚。我在这里要做的是：用户设置一个数据区间，并且该数据区间中的所有引脚都显示在地图中。

我有这个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])

现在我只是在退货时有这个（我现在只是在测试这个）：

    <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>

所以...这里的一切似乎都很好：我设置了两个日期，然后我得到了页面上显示的那个数据间隔中的所有标记/图钉。

问题：

我的页面正在无限地重新渲染...一旦我刷新页面，我在那里的 console.log 就会被垃圾邮件发送，当我将谷歌地图添加到页面时，它甚至不可用，因为页面只是每秒重新渲染一次。现在...我知道这是因为 useState，但是如果没有使用状态，我怎么能做到这一点？因为 api 请求是异步的，所以当我从 api 得到答案时，我必须重新渲染...

【问题讨论】：

标签： javascript reactjs use-effect use-state

【解决方案1】：

您的依赖项数组不正确，您应该在其中包含 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发生变化时运行这个效果，否则数组留空，并且只运行一次，当组件挂载时

【讨论】：

【解决方案2】：

尝试从依赖关系数组中删除 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 时，它会创建一个无限循环。

【讨论】：

@Helder Lourenço，看看这个！