キャッチされない例外TypeError：私は私のファイルをコンパイルし、コンソールログに実行すると、私はこのエラーを取得するApp.render

Question

で

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

をヌルのプロパティ「nameOfCity」を読み取ることができません彼らのAppコンポーネントすべてで「会う」（私は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コンポーネントは状態を保持していません。

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

---

OR

あなたはFormContainerが子としてWeatherInfoをコンテキストを使用してレンダリングすることができますあなたはAppに状態を保存することができ、Fo rmContainerはApp.stateをpropを渡すか、コンテキストを使用して変更します。

Answer 2

エラーが原因で、この時点あなたドンで<WeatherInfo nameOfCity={this.state.nameOfCity}で発生していますコンポーネントの状態がAppの場合はnameOfCityです。

コードでは、nameOfCity変数はFormContainerコンポーネントの状態です。コンポーネント間で使用する場合は、Appコンポーネントの状態にする必要があります。

Answer 3

問題は、uはApp componentでthis.stateを使用して、R、およびApp componentにuはstateがnullあるので、それは、can't read Cannot read property 'nameOfCity' of null、エラーを投げている理由です、どんなstateを定義していなかったです。 U をApp componentに定義し、の値をpropsに渡して、他のcomponentの値を使用する必要があります。

Answer 4

これらのタイプのエラーは、既存のデータ以外の属性を使用しようとすると発生します。この場合、this.stateには値がありません。つまり、nullです。したがって、this.stateが、あなたの機能に応じていくつかの操作によって望ましい値を持っていることを確認してください。