尝试将数组传递给 React 中的子组件时得到未定义的映射

Question

我是 React 新手，正在使用 Open Weather Map 创建天气应用程序。我想要实现的是将天数数组传递给子组件，然后使用 map 函数在子组件的数组中渲染天数。这是我正在使用的代码：

import React, { Fragment, Component } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import SearchBox from "./Containers/SearchBox/SearchBox";
import Header from "./Components/Header/Header";
import styles from "./App.module.css";
import CardContainer from "./Containers/CardContainer/CardContainer";
import axios from "axios";
class App extends Component {
  state = {
    title: []
  };

  getTitle(title) {
    axios
      .get(
        `http://api.openweathermap.org/data/2.5/forecast?q=${title}&APPID=7ad09d078633b652ecef8587a337639e&units=metric`
      )
      .then(res => { //Here I am retrieving data from JSON file received from server
        this.setState(prevState => ({
          title: [...prevState.title, res.data.city.name] //Here I want to access data about name of city
        }));
        this.setState(prevState => ({
          title: [...prevState.title, res.data.list] //This is list array containing days with certain forecast
        }));
      });
  }

  render() {
    return (
      <div className="App">
        <Fragment>
          <Header title={"Weather App"} />
          <div className="container">
            <SearchBox getRequest={this.getTitle.bind(this)} />
          </div>
          <h1 className={styles.cityWeather}>{this.state.title[0]}</h1>
          <CardContainer weatherData={this.state.title[1]} /> //Here I am passing that array of days into child component
        </Fragment>
      </div>
    );
  }
}

export default App;

import React from "react";
import CardItem from "./CardItem/CardItem";

const CardContainer = ({ weatherData }) => {
  return (
    <main>
      {weatherData.map(day => { //HERE I AM GETTING ERROR
        return <p>{day}</p>;
      })}
    </main>
  );
};

export default CardContainer;

Answer 1

this.state.title[1]、this.state.title[0] 是 undefined，直到您发出 GET 请求。

你应该在尝试map未定义值或添加state初始值之前添加一个条件：

const CardContainer = ({ weatherData }) => (
  <main>{weatherData && weatherData.map(day => <p>{day}</p>)}</main>
);

// Or adding an initial value
class App extends Component {
  state = {
    title: ['initial1', 'initial2']
  };
  ....
}

另请注意，通过使用babel's arrow functions as class properties（默认启用），您可以避免将每个函数绑定到this（容易出错）。

// Avoid <SearchBox getRequest={this.getTitle.bind(this)} />
// Using class arrow function:

class App extends Component {
  getTitle = title => {
     ....
  };

  // use this.getTitle(...) without binding
}