レンダリングエラー中の条件文

Question

天気アプリのトグルボタンを作成しようとしています。温度を摂氏から華氏に切り替えることができます。

私はこのコード行が問題を引き起こしているように見えることが確認されました：参照用

Uncaught (in promise) TypeError: Cannot read property 'state' of undefined 
    at renderWeather (http://localhost:8080/bundle.js:25076:16) 

そして残りのコード：

<td>{ this.state.celsius ? cTemp : fTemp }</td> 

これは、コンソールのエラーメッセージです：

import React, { Component } from 'react'; 

export default class WeatherList extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     celsius: true 
    } 

    this.onUnitChange = this.onUnitChange.bind(this); 
    } 

    renderWeather(cityData) { 
    const name = cityData.name; 
    const country = cityData.sys.country; 
    const cTemp = (cityData.main.temp - 273.15).toFixed(1); 
    const fTemp = (cityData.main.temp * 9/5 - 459.67).toFixed(1); 

    return (
     <tr key={name}> 
     <td>{name}, {country}</td> 
     <td>{ this.state.celsius ? cTemp : fTemp }</td> 
     </tr> 
    ) 
    } 

    onUnitChange() { 
    if (this.state.celsius) { 
     this.setState({ 
     celsius: false 
     }); 
    } 
    else { 
     this.setState({ 
     celsius: true 
     }); 
    } 
    } 

    render() { 
    return (
     <table className='table table-hover'> 
     <thead> 
      <tr> 
      <th>City</th> 
      <th>Temperature °<span className='unit-symbol' onClick={this.onUnitChange}>{ this.state.celsius ? 'C' : 'F' }</span></th> 
      <th>Weather</th> 
      </tr> 
     </thead> 
     <tbody> 
      {this.props.cities.map(this.renderWeather)} 
     </tbody> 
     </table> 
    ) 
    } 
} 

Answer 1

あなたは文脈がありません。

お試しください{this.props.cities.map(this.renderWeather.bind(this)}