我正在为一个与 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]) 

现在我只有在返回时有这个（我现在正在测试这个）：

    <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 获得答案时我必须重新渲染...