REACTJS 使用 fetch 通过 const 传递变量

Posted 2023-02-21

【中文标题】REACTJS 使用 fetch 通过 const 传递变量

【英文标题】：REACTJS Pass variable through const using fetch

【发布时间】：2021-07-01 22:59:24

【问题描述】：

我的函数在这里从我正在使用的 openweather API 中获取一些东西。

const [ForecastFind, setForecastFind] = useState(null)
useEffect(() => 
  fetch(
    'https://api.openweathermap.org/data/2.5/onecall?lat=22&lon=151&exclude=current,minutely,daily&APPID=TOKEN',
  )
    .then(response => response.json())
    .then(data => setForecastFind(data.hourly[0].dt))
, [])

当我像这样使用它时效果很好：

<div className="DescriptionsSplitter" style= marginTop: '-20vh' >
  ForecastFind
</div>

我要做的是让它传入一个变量，这样我就可以通过函数访问我想要的任何索引。 （data.hourly[0] ，我得到第一个项目）

我尝试过的是：这显然不是正确的语法，但我不确定正确的语法是什么。

const [ForecastFind, setForecastFind] = useState(null)
useEffect(choose => 
  var choose = 0
  fetch(
    'https://api.openweathermap.org/data/2.5/onecall?lat=22&lon=151&exclude=current,minutely,daily&APPID=TOKEN',
  )
    .then(response => response.json())
    .then(data => setForecastFind(data.hourly[choose].dt))
, [])

尝试将 const 与变量一起使用：

<div className="DescriptionsSplitter" style= marginTop: '-20vh' >
  ForecastFind(1)
</div>

【参考方案1】：

useEffect 不会在回调函数中传递任何参数。您可以做的是将整个数据存储在 ForecastFind 状态并调用一个函数来访问您需要的内容

const [ForecastFind, setForecastFind] = useState(null);
  useEffect(() => 
      var choose = 0;
      fetch('https://api.openweathermap.org/data/2.5/onecall?lat=22&lon=151&exclude=current,minutely,daily&APPID=TOKEN')
          .then(response => response.json())
          .then(data => setForecastFind(data.hourly));

  , []);

const getForecast = (choose) => 
    return ((ForecastFind || )[choose] || ).dt || null;

...

 <div className="DescriptionsSplitter" style=marginTop:'-20vh'>
      getForecast(1)
 </div>

【讨论】：

@Quentin 更新了帖子以处理该问题。但是，如果在获取数据之前不呈现依赖于 ForecastFind 的任何内容，则可以更好地处理，这是我假设 OP 根据他的帖子已经在做的事情

这行得通，但由于某种原因 getForecast(0) 得到了第 3 项而不是第 1 项。一切都在索引中向前移动了 2。

万一你在某处改变了预测数组

我不在任何地方，我发布的上述代码在获取第 0 个索引项时有效。超级诡异

记录 ForecastFind 数组并查看它是否记录了正确的数据可能是有意义的

【参考方案2】：

ForecastFind 不是函数，因此您不能传入参数。 我建议像setForecastFind(((data.hourly))) 一样将整个 data.hourly 数组存储在 ForecastFind 中。 然后就可以这样访问了-

<div className="DescriptionsSplitter" style=marginTop:'-20vh'>
   ForecastFind[1].dt
</div>