TypeError：无法读取未定义的属性（读取＆＃x27; data＆＃x27;）这是由于我的使用情况而引起的吗？

Question

尽管我的代码和测试运行良好，但我在终端中收到了这个错误：

src/components/Weather.tsx:31
    setWeather(response.data.result.weather);
                        ^

TypeError: Cannot read properties of undefined (reading 'data')
    at fetchWeatherData 

我在网上寻找了一些答案，而且大多数人似乎是错别字，但我认为这里并非如此。

这是我的组成部分：

import axios from 'axios';
import { useEffect, useState } from 'react';
import { IWeather } from '../interfaces/IWeather';
import { MdWbSunny } from 'react-icons/md';
import { IoIosPartlySunny } from 'react-icons/io';
import { BsFillCloudSnowFill } from 'react-icons/bs';
import { Title, Text } from '@mantine/core';

const Weather = () => {
  const [weather, setWeather] = useState<IWeather | null>();

  const fetchWeatherData = async () => {
    const response = await axios.get('http://mock-api-call/weather/get-weather');
    setWeather(response.data.result.weather);
  };

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

  return (
    <div className="container">
      <>
        <Title order={2}>
          {weather?.forcast === 'Sunny' ? (
            <MdWbSunny />
          ) : weather?.forcast === 'Snowing' ? (
            <BsFillCloudSnowFill />
          ) : (
            <IoIosPartlySunny />
          )}
        </Title>
      </>
      <Text size="xl">{weather?.forcast}</Text>
      <Text size="lg">Temp: {`${weather?.min} to ${weather?.max}`}</Text>
      <Text size="md">{weather?.description}</Text>
    </div>
  );
};

export default Weather;

错误是提及第31行。这是天气组件中的此块：

 <Title order={2}>
          {weather?.forcast === 'Sunny' ? (
            <MdWbSunny />
          ) : weather?.forcast === 'Snowing' ? (
            <BsFillCloudSnowFill />
          ) : (
            <IoIosPartlySunny />
          )}
        </Title>

Answer 1

尝试像这样调试：

  const fetchWeatherData = async () => {
    const response = await axios.get('http://mock-api-call/weather/get-weather', (request, response) => {
        console.log('request', request);
        console.log('response', response);
        setWeather(response.data.result.weather);
    });
    
  };

欢呼

Answer 2

似乎这不是有效的API URL，为了检测问题是什么，我想在获取函数中添加尝试/捕获块：

const fetchWeatherData = async () => {
    try {
      const response = await axios.get('http://mock-api-call/weather/get-weather');
     // Just put some log to ensure you have the response.
     const {data} = response;
     if (data?.result?.weather) {
        setWeather(data?.result?.weather);
      }
    } catch(error) {
      console.log("An Error is occured : ", error);
    }
  };