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

【问题标题】：Solving multiple renders of component incl. useEffect, useState and Axios解决组件的多个渲染，包括。 useEffect、useState 和 Axios
【发布时间】：2020-11-02 23:27:25
【问题描述】：

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

当前代码：

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;

getLocationData.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</>应该被加载屏幕或微调器或其他东西代替，更多地询问代码结构）。

谢谢！

【问题讨论】：

你可以保持单独的加载状态...

标签： javascript reactjs axios react-hooks use-state

【解决方案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;

【讨论】：