Question

我在组件实现方面遇到了一个小问题。找到下面的代码

var AroundMe = React.createClass({
    getInitialState: function(){

        return({
            dances: [],
            events: this.props.events,
            user_coords: {}
        })
    },
    update_events: function(data){
        this.setState({events: data});
    },

    filter_by_geolocation: function(){
        var vm = this;
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position){
                vm.setState({user_coords: {longitude: position.coords.longitude, latitude: position.coords.latitude}});
                $.ajax({
                    url: "/aroundme.json",
                    datatype: 'JSON',
                    data: vm.state.user_coords,
                    method: 'GET'
                }).done(function(response){
                    vm.update_events(response.aroundme);
                }.bind(vm));
            });
        } else {
            console.log("geo not supported")
        }
    },
    render: function() {
        return(
            <div>
                <button onClick={this.filter_by_geolocation} className='btn btn-danger'>Locate me</button>
                <EventsList events={this.state.events} />
            </div>
        );
    }
});

单击该按钮可更改事件状态，但不会将新值发送到Eventslist组件。我做错了什么？谢谢你的帮助！欢呼声

Answer 1

我有预感。 setState是异步的，因此您需要使用回调。

改变这个：

vm.setState({user_coords: {longitude: position.coords.longitude, latitude: position.coords.latitude}});
$.ajax({
    url: "/aroundme.json",
    datatype: 'JSON',
    data: vm.state.user_coords,
    method: 'GET'
}).done(function(response){
    vm.update_events(response.aroundme);
}.bind(vm));

对此：

vm.setState({user_coords: {longitude: position.coords.longitude, latitude: position.coords.latitude}}, function() {
  $.ajax({
      url: "/aroundme.json",
      datatype: 'JSON',
      data: vm.state.user_coords,
      method: 'GET'
  }).done(function(response){
      vm.update_events(response.aroundme);
  }.bind(vm));
});

更改状态不会触发渲染

1 个答案: