javascript - 未捕获的 TypeError : Cannot read property 'nameOfCity' of null at App. 渲染

Question

当我编译文件并在控制台日志中运行时，出现此错误

enter code here
Uncaught TypeError: Cannot read property 'nameOfCity' of null     at App.render

它们都在应用程序组件中“相遇”(我正在使用来自 facebook 的“create-react-app”包)。我认为它应该加载第一个表单容器，并在其中逻辑将初始状态设置为空，然后天气信息数据出现。还是我错了？

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import {FormContainer} from './containers/FormContainer';
import WeatherInfo from './components/WeatherInfo';

class App extends Component {

render() {
return (
  <div className="App">
    <div className="App-header">
      <img src={logo} className="App-logo" alt="logo" />
      <h2>Weather App</h2>
    </div>
    <p className="App-intro">
      To get started, edit <code>src/App.js</code> and save to reload.
    </p>
      <FormContainer label="Name of the city:"/>
      <WeatherInfo
          nameOfCity={this.state.nameOfCity}
          weatherDescription={this.state.weatherDescription}
          windSpeed={this.state.windSpeed}
          temperature={this.state.temperature}
          maxTemperature={this.state.maxTemperature}
          minTemperature={this.state.minTemperature}
      />
  </div>
);
}
}
export default App;

表单容器

import React, {Component} from 'react';
import SearchBar from '../components/SearchBar';

class FormContainer extends Component {

constructor(props) {
    super(props);
    this.state = {
        cityName: '',
        nameOfCity:'',
        weatherDescription:'',
        windSpeed:'',
        temperature:'',
        maxTemperature:'',
        minTemperature:''
    };
    this.handleFormSubmit = this.handleFormSubmit.bind(this);
    this.handleCityName = this.handleCityName.bind(this);
}

handleFormSubmit(e) {
    e.preventDefault();

    const SendForm = {
        cityName: this.state.cityName
    };
    console.log(SendForm);
    fetch(`http://api.openweathermap.org/data/2.5/forecast/weather?q=${SendForm.cityName}&units=metric&APPID=********`)
        .then(res => res.json())
        .then(results => {
            this.setState({
                nameOfCity: results.city.name,
                weatherDescription: results.list[0].weather[0].description,
                windSpeed: results.list[2].wind.speed,
                temperature: results.list[0].main.temp,
                maxTemperature: results.list[0].main.temp_max,
                minTemperature: results.list[0].main.temp_min
            });
        });
}

handleCityName(value) {
    this.setState({ cityName: value });
}

render() {
    return (
        <div>
        <form onSubmit={this.handleFormSubmit}>
            <label>{this.props.label}</label>
            <SearchBar
                name="CityName"
                type="text"
                value={this.state.cityName}
                placeholder="search"
                onChange={this.handleCityName}
            />
            <button type="submit"
                    className=""
                    value='Submit'
                    placeholder="Search" />
        </form>

        </div>
    );
}
}

export {FormContainer};

搜索栏组件

import React, {Component} from 'react';

const SearchBar = (props) => (
<div>
    <label>{props.label}</label>
    <input name={props.name} type={props.inputType} value={props.value} placeholder={props.placeholder} onChange={(e)=>props.onChange(e.target.value)}/>
</div>
);

export default SearchBar;

和天气信息组件

import React, {Component} from 'react';

const WeatherInfo = (props) => (
<div>
    <ul>
        <li>{props.nameOfCity}</li>
        <li>{props.weatherDescription}</li>
        <li>{props.windSpeed}</li>
        <li>{props.temperature}</li>
        <li>{props.maxTemperature}</li>
        <li>{props.minTemperature}</li>
    </ul>
</div>
);

export default WeatherInfo;

Answer 1

您正在尝试从 App 中的 this.state 读取 nameOfCity，但您的 App 组件不保存状态。

您可以让 FormContainer 使用上下文并将 WeatherInfo 呈现为子项:

class FormContainer extends Component {
  ...
  static childContextTypes = {
    nameOfCity: React.PropTypes.string
  }
  getChildContext() {
    return {
      nameOfCity: this.state.nameOfCity
    }
  }
 render: () {
   ...
   </form>
   {this.children}
 }

}

App.jsx:

<FormContainer label="Name of the City:">
  <WeatherInfo />
</FormContainer>

WeatherInfo.jsx:

class WeatherInfo extends React.Component {
  static contextTypes = {
    nameOfCity: React.PropTypes.string
  }
  render: () {
    <div>
      <ul>
        <li>{this.context.nameOfCity}</li>
        ...
  }
}

<小时/>

或者您可以在 App 中存储状态，并让 FormContainer 通过传递 prop 或使用上下文来更改 App.state。