Javascript 未捕获类型错误：无法读取属性'；城市名称'；在App.render处为null

当我编译我的文件并在控制台日志中运行时，我得到了这个错误

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

他们都在应用程序组件上“见面”（我正在使用facebook上的“创建反应应用程序”包）。我假设它应该首先加载表单容器，并在其中逻辑将初始状态设置为空，然后天气信息数据就会出现。还是我错了

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}来自'React'；
从“../components/SearchBar”导入搜索栏；
类FormContainer扩展组件{
建造师（道具）{
超级（道具）；
此.state={
城市名称：“”，
城市名称：''，
天气描述：“”，
风速：''，
温度：''，
最大温度：''，
最小温度：“”
};
this.handleFormSubmit=this.handleFormSubmit.bind（this）；
this.handleCityName=this.handleCityName.bind（this）；
}
handleFormSubmit（e）{
e、 预防默认值（）；
常量SendForm={
城市名称：this.state.cityName
};
console.log（SendForm）；
取回(`http://api.openweathermap.org/data/2.5/forecast/weather?q=${SendForm.cityName}&units=metric&APPID=*********`）
.then（res=>res.json（））
。然后（结果=>{
这是我的国家({
城市名称：results.city.name，
weatherDescription:结果。列表[0]。天气[0]。说明，
风速：results.list[2]。wind.speed，
温度：results.list[0]。main.temp，
maxTemperature:results.list[0]。main.temp_max，
MintTemperature:结果.列表[0].main.temp\u min
});
});
}
handleCityName（值）{
this.setState（{cityName:value}）；
}
render（）{
返回(
{this.props.label}
);
}
}
导出{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;

import React，{Component}来自'React'；
常量搜索栏=（道具）=>(
{props.label}
props.onChange（e.target.value）}/>
);
导出默认搜索栏；

和天气信息组件

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;

import React，{Component}来自'React'；
const WeatherInfo=（道具）=>(

{props.nameOfCity}
{props.weatherDescription}
{props.windSpeed}
{props.temperature}
{props.maxTemperature}
{props.mintTemperature}

);
导出默认天气信息；
错误发生在
错误发生在
问题在于使用
此。状态
在
应用组件中
，而在
应用组件中
没有定义任何
状态，这就是它抛出错误的原因，
无法读取null的属性'nameOfCity'，因为
状态
为
空
。您需要在
应用程序组件中定义
状态
，然后在
道具中传递此
状态
值，并在其他
组件中使用这些值
问题是您使用
此。在
应用程序组件中，状态
，而在
应用程序组件中，您没有定义任何
状态
，这就是它抛出错误的原因，
不能读取不能读取null的属性“nameOfCity”
，因为
状态
是
null
。您需要在
应用程序组件中定义
状态
，然后在
道具中传递此
状态
值，并在其他
组件中使用这些值
您正试图从应用程序中的此.state读取城市名称，但您的应用程序组件不保持状态

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

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

}

类FormContainer扩展组件{
...
静态childContextTypes={
城市名称：React.PropTypes.string
}
getChildContext（）{
返回{
城市名称：this.state.nameOfCity
}
}
渲染：（）{
...
{这个。孩子们}
}
}

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>
        ...
  }
}

class WeatherInfo扩展了React.Component{
静态上下文类型={
城市名称：React.PropTypes.string
}
渲染：（）{

{this.context.nameOfCity}
...
}
}


或者，您可以在应用程序中存储状态，并通过传递道具或使用上下文让FormContainer更改App.state。
您正试图从应用程序中的此.state读取城市名称，但您的应用程序组件不保存状态

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

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

}

类FormContainer扩展组件{
...
静态childContextTypes={
城市名称：React.PropTypes.string
}
getChildContext（）{
返回{
城市名称：this.state.nameOfCity
}
}
渲染：（）{
...
{这个。孩子们}
}
}

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>
        ...
  }
}

class WeatherInfo扩展了React.Component{
静态上下文类型={
城市名称：React.PropTypes.string
}
渲染：（）{

{this.context.nameOfCity}
...
}
}


或者，您可以将状态存储在App中，并通过传递道具或使用上下文使FormContainer更改App.state。
当您尝试使用不存在数据的属性时，会发生此类错误。在这种情况下，此.state没有值，即它的null。因此，请确保您的this.state具有所需的值，方法是根据您的功能进行一些操作。
当您尝试使用不存在数据的属性时，会发生此类错误。在这种情况下，此.state没有值，即它的null。因此，请确保您的this.state具有所需的值，方法是根据您的功能进行一些操作。
谢谢您的解释，但我不会使用上下文。。。他们在fb中建议开发者不要使用它们谢谢你的解释，但我不会使用上下文。。。他们在fb中建议开发者不要这样做