web-dev-qa-db-ja.com

this.props未定義または空のオブジェクトに反応する

地理位置情報を渡す小さな反応アプリを構築します（ブラウザによって小道具として子コンポーネントに決定されます）。

最初のコンポーネント：App.jsx

import React, {Component} from 'react';

import DateTime from './components/dateTime/_dateTime.jsx';
import Weather from './components/weather/_weather.jsx';
import Welcome from './components/welcome/_welcome.jsx';

require ('../sass/index.scss');

export default class App extends Component {

  constructor() {
    super();
    this.state = {
      latitude: '',
      longitude: ''
    };
    this.showPosition = this.showPosition.bind(this);
  }

  startApp () {
    this.getLocation();
  }

  getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(this.showPosition);
    } else {
        console.log("Geolocation is not supported by this browser.");
    }
  }

  showPosition(position) {
    this.setState({
        latitude: position.coords.latitude,
        longitude: position.coords.longitude
    })
  }

  componentWillMount () {
    this.startApp();
  }

  render() {
    return (
        <div className="container">
            <div className="header-container">
                <Weather latitude={ this.state.latitude } longitude={ this.state.longitude } />
            <DateTime />
            </div>
            <div className="welcome-container">
                <Welcome name="Name" />
            </div>
      </div>
    );
  }
}

このコンポーネントは位置を決定し、州と緯度を保存し、この情報を小道具を介してWeather.jsxコンポーネントに渡します。Weather.jsxコンポーネントは、以下の画像に示すように機能しています。

enter image description here

そして、weather.jsxコンポーネントでは、これらの小道具にアクセスして、未定義または空のオブジェクトを取得しようとします。

import React, {Component} from 'react';
import Fetch from 'react-fetch';

export default class Weather extends Component {

    constructor(props) {
        super(props);
        this.state = {
          forecast: {},
          main: {},
          weather: {},
        };
        this.setWeather = this.setWeather.bind(this);
    }

    getWeather (latitude, longitude) {
        var self = this;

        fetch('http://api.openweathermap.org/data/2.5/weather?lat=' + latitude + '&lon=' + longitude + '&units=metric&APPID=ed066f80b6580c11d8d0b2fb71691a2c')  
            .then (function (response) {  
                if (response.status !== 200) {  
                    console.log('Looks like there was a problem. Status Code: ' + response.status);  
                    return;  
                }

                response.json().then(function(data) {  
                    self.setWeather(data);
                });
            })

            .catch (function (err) {  
                console.log('Fetch Error :-S', err);  
            });
    }

    setWeather (forecast) {
        var main = forecast.main;
        var weather = forecast.weather[0];

        this.setState({
            main: main,
            weather: weather,
            forecast: forecast
        });
    }

    startApp () {
        this.getWeather(this.props.latitude, this.props.longitude);
    }

    componentWillMount () {
        this.startApp();
    }

    componentDidMount () {
        // window.setInterval(function () {
    //          this.getWeather();
    //  }.bind(this), 1000);
    }

  render() {
    return (
        <div className="">
            <div className="weather-data">
                <span className="temp">{Math.round(this.state.main.temp)}&#176;</span>
                <h2 className="description">{this.state.weather.description}</h2>
            </div>
        </div>
    )
  }
}

反応の開発ツールは、天気コンポーネントが実際にそのコンポーネントに渡される小道具に設定された場所を持っていることを示しているため、問題が何であるかは本当にわかりません。

編集**解決済み：

そのため、問題は状態が非同期に設定され、状態が更新される前に天気コンポーネントがレンダリングされることでした。

レンダリングメソッド中に状態内の値を簡単にチェックすることで問題が解決しました。

render() {

    if (this.state.latitude != '' && this.state.longitude != '') {
      var weatherComponent = <Weather latitude={ this.state.latitude } longitude={ this.state.longitude } />
    } else {
      var weatherComponent = null;
    }

    return (
        <div className="container">
            <div className="header-container">
                {weatherComponent}
            <DateTime />
            </div>
            <div className="welcome-container">
                <Welcome name="Name" />
            </div>
      </div>
    );
  }
reactjscomponentsstate
19
chinds

問題は次のとおりだと思います。 SetStateは非同期に発生します。このため、緯度と経度の小道具がデータを取得する前に、レンダリング関数が起動します。 Weatherコンポーネントをレンダリングする前にチェックする場合、この問題はおそらくないでしょう。ここに私が言っていることの例があります。

render() {
    let myComponent;
    if(check if props has val) {
        myComponent = <MyComponent />
    } else {
        myComponent = null
    }
    return (
        <div>
            {myComponent}
        </div>
    )
}
11
Chaim Friedman

startApp()およびgetWeather()をコンポーネントにバインドする必要があります。バインドしない場合、thisはundefinedになります。

export default class Weather extends Component {

    constructor(props) {
        super(props);
        this.state = {
          forecast: {},
          main: {},
          weather: {},
        };
        this.setWeather = this.setWeather.bind(this);
        this.getWeather = this.getWeather.bind(this);
        this.startApp = this.startApp.bind(this);
    }
    ...
}
2
QoP

できるだけきれいにレンダリングする必要があります。代わりにレンダリングでelse ifを行うことは避け、代わりにelseで三項演算子または&&演算子を直接チェックしてください。以下のような条件付きチェックを行い、次にMyComponentを次のように呼び出します

render() {
    return (
        <div>
            {this.state.latitude != '' && this.state.longitude != '' ? <Weather latitude={ this.state.latitude } longitude={ this.state.longitude } />: null}
            {this.state.latitude != '' && this.state.longitude != '' && <Weather latitude={ this.state.latitude } longitude={ this.state.longitude } />}
        </div>
    )
}
0
Hemadri Dasari