ReactJS如何在状态具有特定值时运行API调用

Question

我正在自学React，我的一项练习是使用axios从API中获取国家/地区列表

const fetchCountries = () => {
    axios.get("https://restcountries.eu/rest/v2/all").then(response => {
      setCountries(response.data);
    });
  };

  React.useEffect(fetchCountries, []);

然后，当用户输入输入内容时，国家/地区列表会向下过滤。

我的[[目标是，当匹配一个国家/地区时，会触发一个新的API请求（以获取天气，但是what不是我的问题，而是时间）。匹配单个国家/地区后，我将呈现有关该国家/地区的一些数据，然后获取并呈现单个国家/地区的首都的天气详细信息。

我遇到的问题之一是，当我设置状态时，该值似乎总是落后一步。例如，在此Codepen中，当您输入FRA时，您应该得到“法国”。但是，我必须输入“ FRAN”才能获得比赛。当我不使用状态变量进行匹配时（仅let matches），这不会发生。这成为一个问题，因为当匹配数= 1，但是匹配状态的长度始终错误时，我需要运行下一个API调用。

所以我想知道1.如何获得匹配国家的正确状态。 2. 2. [[when

我应该运行第二个API调用而不会陷入无限循环。

Answer 1

记住setting the state is asynchronous（即不会立即生效）

这里是更新版本：

const handleInputChange = event => {

  const filter = event.target.value; // current input value
  let matchingCountries = filter ? <code here>
  // ...
  setQuery(filter);
};