Question

我正在为一个与 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 中得到答案时，我必须重新渲染...

Answer 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变化时运行这个效果，否则数组留空，只运行一次，组件挂载时

Answer 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])

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

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

2 个答案: