Javascript 解决组件的多个渲染，包括useEffect、useState和Axios

我有一个React功能组件，它正在进行axios调用，将其设置为state，并将在渲染中使用该数据

当前代码：

WeatherPanel.jsx

import React, { useEffect, useState } from "react";
import getLocationData from "../api/getLocationData";

const WeatherPanel = () => {
  const [locationData, setLocationData] = useState();

  useEffect(() => {
    async function populateLocationData() {
      const data = await getLocationData();
      setLocationData(data);
    }
    populateLocationData();
  }, []);

  return locationData ? (
    <>
      <div>Hello {locationData.woeid}</div>
    </>
  ) : (
    <>Loading</>
  );
};

export default WeatherPanel;

问题:

好像我必须有

位置数据？（

保护渲染，因此加载部分会在useEffect中的useState完成之前尝试渲染，导致

locationData.woeid

未定义和中断

这是处理此问题的正确/最佳方法吗？是否有一种方法可以让功能组件在尝试第一次渲染之前完成某些内容

（我知道

加载

应该用加载屏幕或旋转器或其他东西来代替，更多的是询问代码结构）

---

谢谢！

您可以保持加载状态并像这样处理：

import React, { useEffect, useState } from 'react';
import getLocationData from '../api/getLocationData';

const WeatherPanel = () => {
  const [locationData, setLocationData] = useState();
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    async function populateLocationData() {
      setIsLoading(true);
      try {
        const data = await getLocationData();
        setLocationData(data);
        setIsLoading(false);
      } catch (error) {
        console.log(error);
        setIsLoading(false);
      }
    }
    populateLocationData();
  }, []);

  function renderWeahter() {
    if (isLoading) return <div>Loading...</div>;
    return <div>Hello {locationData.woeid}</div>;
  }

  return <div>{renderWeahter()}</div>;
};

export default WeatherPanel;

import React，{useffect，useState}来自“React”；
从“../api/getLocationData”导入getLocationData；
常数天气面板=（）=>{
const[locationData，setLocationData]=useState（）；
const[isLoading，setIsLoading]=useState（false）；
useffect（（）=>{
异步函数populateLocationData（）{
设置加载（真）；
试一试{
常量数据=等待getLocationData（）；
setLocationData（数据）；
设置加载（假）；
}捕获（错误）{
console.log（错误）；
设置加载（假）；
}
}
populateLocationData（）；
}, []);
函数renderWeahter（）{
如果（卸载）返回加载。。。；
返回Hello{locationData.woeid}；
}
返回{renderwheahter（）}；
};
导出默认天气面板；

您可以保留单独的加载状态。。。

import React, { useEffect, useState } from 'react';
import getLocationData from '../api/getLocationData';

const WeatherPanel = () => {
  const [locationData, setLocationData] = useState();
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    async function populateLocationData() {
      setIsLoading(true);
      try {
        const data = await getLocationData();
        setLocationData(data);
        setIsLoading(false);
      } catch (error) {
        console.log(error);
        setIsLoading(false);
      }
    }
    populateLocationData();
  }, []);

  function renderWeahter() {
    if (isLoading) return <div>Loading...</div>;
    return <div>Hello {locationData.woeid}</div>;
  }

  return <div>{renderWeahter()}</div>;
};

export default WeatherPanel;