异步函数带有诺言。所有人仅在更新代码后运行

Question

我正在编写反应中的异步功能，该功能应将“坐标”状态设置为包含美国州及其各自纬度/纵向的对象。为此，我正在使用Promise.All进行API呼叫并解决这些呼叫。在页面的第一个更新中，该功能按预期工作。但是，在随后的刷新中，该函数不会执行承诺。所有声明，因此没有设置坐标状态。为什么这种情况？如何解决这个问题？

export default function App() {

  const [covidDataJSON, setCovidDataJSON] = useState(null);
  const [stateNames, setStateNames] = useState([]);
  const [coords, setCoords] = useState([]);
  const [stateInfos, setStateInfos] = useState([]);

  useEffect(() => {
    fetchCoords();
  }, [])

  const fetchCoords = async () => {
    try {
      getStateNames();
      const req = await Promise.all(stateNames.map(async (state) => {
        return await axios.get(`https://nominatim.geocoding.ai/search.php?state=${state}&format=jsonv2`);
      }))
      for (let i = 0; i < req.length; i++){
        const stateInfo = req[i].data[0];
        if (req[i].data.length !== 0)
          setCoords(coordsArr => [...coordsArr, {name: stateInfo.display_name, lat: stateInfo.lat, lon: stateInfo.lon}]);
      }
    } catch (err) {
      console.error(err);
    }
  };

  const getStateNames = () => {
    try {
      const stateArr = [];
      for (let i = 0; i < states.length; i++){
        stateArr.push(states[i].name);
      }
      setStateNames(stateArr);
    } catch (error) {
      console.error(error);
    }
  }

Answer 1

我认为您的诺言。所有人都不执行，因为Statename仍然是一个空数组。

您需要定义2个使用效果挂钩如下。 -

// this will trigger function fetchCoords once your have set the stateNames.
useEffect(() => {
    if(!stateNames || !stateNames.length){
        return;
    }
    fetchCoords();
}, [stateNames]);

// this hook will set your stateNames once the component loads.
useEffect(() => {
    getStateNames();
}, [])

此外，我看不到上述示例代码中定义的getStateNames中使用的状态变量。还要从fetchcoords（）内部删除getStateNames（）调用以上是否适合您，并尝试登录stateNames来验证这一点。

Answer 2

1. getStateNames（），您正在调用setStateNames（statearr）;状态的设置器函数是异步。您正在映射fetchcoords（）内的statename。在运行地图循环时，stateNames未更新状态可能性。这就是为什么我从getStateNames（）返回statearr，然后在fetchcoords（）中使用该值。。

2. 内部fetchcoords（），您添加了以下代码

const req = await Promise.all(stateNames.map(async (state) => {
        return await axios.get(`https://nominatim.geocoding.ai/search.php?state=${state}&format=jsonv2`);
      }))

因此无需等待Axios.get（）在这里等待承诺解决的原因，这就是为什么我从.map中删除了等待Axios.get（） > Promise.all（）

尝试一下。我认为这应该有效。

export default function App() {
  const [covidDataJSON, setCovidDataJSON] = useState(null);
  const [stateNames, setStateNames] = useState([]);
  const [coords, setCoords] = useState([]);
  const [stateInfos, setStateInfos] = useState([]);

  useEffect(() => {
    fetchCoords();
  }, []);

  const fetchCoords = async () => {
    try {
      const stateArr = getStateNames();
      const req = await Promise.all(
        stateArr.map((state) => {
          return axios.get(
            `https://nominatim.geocoding.ai/search.php?state=${state}&format=jsonv2`
          );
        })
      );

      for (let i = 0; i < req.length; i++) {
        const stateInfo = req[i].data[0];
        if (req[i].data.length !== 0)
          setCoords((coordsArr) => [
            ...coordsArr,
            {
              name: stateInfo.display_name,
              lat: stateInfo.lat,
              lon: stateInfo.lon
            }
          ]);
      }
    } catch (err) {
      console.error(err);
    }
  };

  const getStateNames = () => {
    try {
      const stateArr = [];
      for (let i = 0; i < states.length; i++) {
        stateArr.push(states[i].name);
      }
      setStateNames(stateArr);
      return stateArr;
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}