一旦状态中的数据不为空，ReactJS 就显示组件

Question

编辑：所以我在堆栈溢出方面遇到了一些麻烦，不得不重新输入一些东西....包括 Weather weatherData={this.state.weatherData} 我不小心在这里输入错误天气weatherData={weatherData}。但我也确实在我的代码上犯了一个输入错误，那就是 setState。我是 reactjs 的新手，有些语法我觉得很奇怪，所以这可能就是我有语法错误的原因。所以我最终修复了一些东西，但仍然出现错误“this.setState 不是函数”。我想这可能是一个范围问题，所以我创建了一个新方法 updateWeatherData，瞧，它奏效了。

所以我正在尝试制作一个天气应用程序。一旦this.state.weatherData中有数据，我想要做的是加载名为Weather的子组件。我已经检查了一个 console.log 并且数据是从 ajax 调用返回的，但我似乎无法设置它。我收到的错误消息是“无法读取未定义的属性 'weatherData'”

var React = require('react');
var Weather = require('./Weather');


class App extends React.Component{
    constructor(props)
    {
        super(props);
        this.state = {
            weatherData: null,
        };
        this.getDataFromLatLng = this.getDataFromLatLng.bind(this);
        this.showPosition = this.showPosition.bind(this);
    }
    updateWeatherData (results)
    {
        this.setState({
            weatherData:results
        });
    }
    componentDidMount()
    {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(this.showPosition);

        } else {
            alert("Geolocation is not supported by this browser.");
        }
    }
    showPosition(position)
    {
        this.getDataFromLatLng(position.coords.latitude, position.coords.longitude);
    }
    getDataFromLatLng(lat, lng)
    {
        $.ajax({
            url: 'http://api.openweathermap.org/data/2.5/weather?lat='+lat+'&lon='+lng+"&units=metric&appid=ID",
            type:"GET",
            dataType:"jsonp",
             //CHANGED FROM THIS:
            /*success:function(results){
                //RESULTS COME BACK
                console.log(results);
                this.setState=({
                    weatherData:results
                });
                console.log(this.state.weatherData);
                //But no weatherData is being set

            },*/
            //TO THIS:
            success:this.updateWeatherData,
            error: function(xhr, status, error) {
              console.log(xhr.responseText + " " + status, " " + error);
            }
        });
    }
    render()
    {
        return(
            <div id="container">
                Hello From App
                {this.state.weatherData != null
                    ? <Weather weatherData={this.state.weatherData}/>
                    : <p>Loading...</p>
                }

            </div>
        );
    }
}

module.exports = App;

Answer 1

将<Weather weatherData={weatherData}/> 更改为<Weather weatherData={this.state.weatherData}/>

关于console.log(this.state.weatherData)为什么不显示你设置的值，是因为setState是异步的。见this article。

具体来说，我指的是文章中的以下几行：

// assuming this.state = { value: 0 }
this.setState({
  value: 1
});
console.log(this.state.value); // 0

Answer 2

 <div id="container">
            Hello From App
            {this.state.weatherData != null
                ? <Weather weatherData={weatherData}/>
                : <p>Loading...</p>
            }

        </div>

如果您在此处看到您的代码，您希望它在 this.state.weatherData 中有内容时呈现。所以可以说它已经有了，现在是时候渲染了。你正在渲染的组件被赋予了作为 weatherData 的道具……但你没有在任何地方定义它。你实际上想要传递的状态是

 <div id="container">
            Hello From App
            {this.state.weatherData != null
                ? <Weather weatherData={this.state.weatherData}/>
                : <p>Loading...</p>
            }

        </div>

因为你看不到它，因为

  //RESULTS COME BACK
            console.log(results);


            this.setState=({
                weatherData:results
            });
            console.log(this.state.weatherData);
            //But no weatherData is being set

结果来了，你 setState 的结果。但是，这不是您可以将值设置为的对象..它将被调用，并且 react 将执行其操作并更新状态，但在继续之前它不会执行此操作。它只是向前移动并在后台异步执行。一旦 getDataFromLatLng 完成，就会调用渲染，您应该始终检查渲染方法中的更新状态..

render(){
   console.log(this.state.weatherData);
   // Your Code here
}

您将在那里看到更新后的状态。 至于你在哪里传递道具作为 weatherData 而不是 this.state.weatherData ，如果你打算在渲染中更多地使用它，就像你使用两次一样。如果你喜欢，你可以像这样使用它。这叫Object destructuring

render(){
  const {weatherData} = this.state ;
 return(
        <div id="container">
            Hello From App
            {weatherData != null
                ? <Weather weatherData={weatherData}/>
                : <p>Loading...</p>
            }

        </div>
    );
}

您现在可以使用 weatherData 代替 this.state.weatherData。我们在这里使用 const 来声明，因为 state 是不可变的，所以你不会在 render 中错误地改变它。