Reactjs react组件不更新状态

当我控制台记录状态时，它返回未定义，但在我的react-dev工具中，我可以看到结果数组。 这是一个组件：

    var Categorias = React.createClass({
  getInitialState: function () {
    return {
      items: []
    };
  },

componentWillMount: function (){
  var  firebaseRef = new Firebase("https://rapifood.firebaseio.com/categorias");
  firebaseRef.on("child_added", function(dataSnapshot) {
    var items= [];
    items.push(dataSnapshot.val());
    this.setState({
      items: items
    });
  }.bind(this));
},

componentDidMount: function () {
  console.log(this.state.items);
},

---

我做错了什么

这是因为您正在设置ajax回调的状态，该回调在初始渲染（componentDidMount）后完成。

这是因为您正在设置ajax回调的状态，该回调在初始渲染（componentDidMount）后完成。

您可能需要另一个状态变量来跟踪加载状态：

var Categories = React.createClass({
  getInitialState: function () {
    return {
      loaded: false,
      items: []
    };
  },

  componentWillMount: function (){
    var  firebaseRef = new Firebase("https://rapifood.firebaseio.com/categorias");
    firebaseRef.on("child_added", function(dataSnapshot) {
      this.setState({
        loaded: true,
        items: this.state.items.concat(dataSnapshot.val())
      });
    }.bind(this));
  },

  componentWillUnmount: function() {
    // Don't forget to remove the Firebase subscription here.
  }

  render: function() {
    if (!this.state.loaded) {
      return <div>Loading...</div>;
    }
    // Now you can render the list of items here.
  },
});

var Categories=React.createClass({
getInitialState:函数（）{
返回{
加载：false，
项目：[]
};
},
componentWillMount:函数（）{
var firebaseRef=新的Firebase（“https://rapifood.firebaseio.com/categorias");
firebaseRef.on（“添加的子对象”，函数（dataSnapshot）{
这是我的国家({
是的，
items:this.state.items.concat（dataSnapshot.val（））
});
}.约束（这个）；
},
componentWillUnmount:function（）{
//别忘了在这里删除Firebase订阅。
}
render:function（）{
如果（！this.state.loaded）{
返回装载。。。；
}
//现在，您可以在此处呈现项目列表。
},
});

您可能需要另一个状态变量来跟踪加载状态：

var Categories = React.createClass({
  getInitialState: function () {
    return {
      loaded: false,
      items: []
    };
  },

  componentWillMount: function (){
    var  firebaseRef = new Firebase("https://rapifood.firebaseio.com/categorias");
    firebaseRef.on("child_added", function(dataSnapshot) {
      this.setState({
        loaded: true,
        items: this.state.items.concat(dataSnapshot.val())
      });
    }.bind(this));
  },

  componentWillUnmount: function() {
    // Don't forget to remove the Firebase subscription here.
  }

  render: function() {
    if (!this.state.loaded) {
      return <div>Loading...</div>;
    }
    // Now you can render the list of items here.
  },
});

var Categories=React.createClass({
getInitialState:函数（）{
返回{
加载：false，
项目：[]
};
},
componentWillMount:函数（）{
var firebaseRef=新的Firebase（“https://rapifood.firebaseio.com/categorias");
firebaseRef.on（“添加的子对象”，函数（dataSnapshot）{
这是我的国家({
是的，
items:this.state.items.concat（dataSnapshot.val（））
});
}.约束（这个）；
},
componentWillUnmount:function（）{
//别忘了在这里删除Firebase订阅。
}
render:function（）{
如果（！this.state.loaded）{
返回装载。。。；
}
//现在，您可以在此处呈现项目列表。
},
});

您可能希望尝试将

控制台.log

放入渲染函数中。不确定在

componentDidMount

启动时数据是否已存在。您可能希望尝试将

console.log

放入渲染函数中。不确定在

componentDidMount

时数据是否已经存在FiredexSample是否是更好的方法？更好方法的示例？