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

Question

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

当前代码：

天气面板.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;

获取位置数据.js

import axios from "axios";

const getLocationData = async () => {
  const response = await axios.get("/api/location/44418/");
  return response.data;
};

export default getLocationData;

问题：

似乎我必须locationData ? (在渲染上设置防护，因此加载部分，因为没有它，它会在 useEffect 中的 useState 完成之前尝试渲染，导致locationData.woeid未定义和中断。

这是处理此问题的正确/最佳方法吗？有没有办法让功能组件在尝试第一次渲染之前完成一些事情？

（我知道<>Loading</>应该用加载屏幕或微调器或其他东西代替，更多地询问代码结构）。

谢谢！

标签： javascriptreactjsaxiosreact-hooksuse-state

Answer 1

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

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;