遺漏的類型錯誤：在App.render

Question

無法讀取空的特性「nameOfCity」當我編譯我的文件，並在控制檯日誌中我得到這個錯誤

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; 

Form容器

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

---

OR你可以在App中存儲狀態，並且有Fo rmContainer通過傳遞一個prop或者使用context來改變App.state。

Answer 2

誤差以<WeatherInfo nameOfCity={this.state.nameOfCity}發生因爲搜索欄組件

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; 

和天氣信息分量這點你不要在App組件狀態中沒有nameOfCity。

在您的代碼中，nameOfCity變量位於FormContainer組件狀態內。如果你想在組件中使用它，你應該有App組件的狀態。

Answer 3

問題爲u R IN App component使用this.state，並在App componentü沒有定義任何state，這就是爲什麼它是拋出錯誤，can't read Cannot read property 'nameOfCity' of null，因爲state是null。 U需要在App component中定義state，然後在props中傳遞該值state並在其他component中使用這些值。

Answer 4

當您嘗試使用不存在的數據的屬性時，會出現這些類型的錯誤。在這種情況下，這個狀態不具有值，即它的零。所以請確保您的this.state通過根據您的功能進行某些操作而具有期望的價值。