0

我App.js在子组件的状态对象中显示信息时遇到问题。下面是相关部分。App.js,WeatherDetail是前面提到的组件，然后是来自 API 请求的响应。

应用程序.js 

import React from "react";
import openweather from "../api/openweather";
import SearchBar from "./SearchBar";
import WeatherDetail from "./WeatherDetail";

class App extends React.Component {
  state = { weather: [], daily: [] };

  onSearchSubmit = async zip => {
    const currentWeather = openweather.get("/data/2.5/weather", {
      params: { zip }
    });

    const fiveDayForecast = openweather.get("/data/2.5/forecast", {
      params: { zip }
    });

    const [weather, daily] = await Promise.all([
      currentWeather,
      fiveDayForecast
    ]);

    this.setState({ weather: weather.data, daily: daily.data.list });
  };

  render() {
    return (
      <div>
        <SearchBar onSubmit={this.onSearchSubmit} />
        <WeatherDetail weather={this.state.weather} />
      </div>
    );
  }
}

export default App;

WeatherDetail.js

const WeatherDetail = ({ weather }) => {
  return (
    <div>
      <h1>Today</h1>
      <h3>City: {weather.name}</h3>
      <h5>Temperature:</h5>
    </div>
  );
};

>forecast:
   base: "stations"
  >clouds: {all: 75}
   cod: 200
  >coord: {lon: -82.54, lat: 40.7}
   dt: 1553023267
   id: 420031370
  >main:
     humidity: 45
     pressure: 1030
     temp: 44.22
     temp_max: 46.99
     temp_min: 41
   name: "Elyria"

现在，weather.name毫无问题地显示在视图中。如果我尝试获取任何比这更深的信息，我会收到一条错误消息，指出该属性未定义。例如，weather.main.temp我认为我会如何获得温度，但它显示了该错误。weather.main单独给出一个明显的错误，但它显示了我试图在消息中访问的对象。weather.main.temp因此，当还说属性（主要）未定义时，我很困惑。我是在尝试错误地访问对象还是其他设置错误？

4

1 回答 1

0

在您从 API 收到结果之前，初始渲染出现了问题。第一次WeatherDetail渲染时，它具有您设置为的默认状态state = { weather: [], daily: [] };。这意味着在初始渲染时 . 上不存在main属性state.weather。它只是一个空数组。这些属性仅在您在运行时填充它们时才存在onSearchSubmit。

我会在您的WeatherDetail组件中添加一些验证。如下所示：

const WeatherDetail = ({ weather }) => {
  const { name, main } = weather;
  return (
    <div>
      <h1>Today</h1>
      <h3>City: { name ? name : ''}</h3>
      <h5>Temperature: { main ? main.temp : '' }</h5>
    </div>
  );
};

这样，在初始渲染时，如果属性不存在，您仍然可以渲染空字符串，并且当状态被填充并且存在正确的属性时，它将渲染正确的内容。

于 2019-03-21T12:47:26.860 回答