首页 文章

ReactJS this.state null

提问于
浏览 次
47

让我先说一下我是ReactJS的新手 . 我试图通过创建一个使用React填充数据的简单站点来学习 . 我有一个JSON文件，其中包含将通过map循环的链接数据 .

我已经尝试将其设置为组件状态，然后通过道具将其传递给导航栏链接但我得到“未捕获的TypeError：无法读取null的属性'数据'”

我试图四处寻找解决方案但找不到任何东西 .

注意：当我尝试对对象进行硬编码并以这种方式映射它时，返回的映射是未定义的 . 但是我不确定它是否与setState错误直接相关 .

/** @jsx React.DOM */

var conf = {
    companyName: "Slant Hosting"
  };

var NavbarLinks = React.createClass({
  render: function(){
    var navLinks = this.props.data.map(function(link){
      return(
        <li><a href={link.target}>{link.text}</a></li>
      );
    });
    return(
      <ul className="nav navbar-nav">
        {navLinks}
      </ul>
    )
  }
});

var NavbarBrand = React.createClass({
  render: function(){
    return(
      <a className="navbar-brand" href="#">{conf.companyName}</a>
    );
  }
});

var Navbar = React.createClass({
  getInitalState: function(){
    return{
      data : []
    };
  },
  loadNavbarJSON: function() {
    $.ajax({
      url: "app/js/configs/navbar.json",
      dataType: 'json',
      success: function(data) {
        this.setState({
          data: data
        });
        console.log(data);
        console.log(this.state.data);
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  componentDidMount: function(){
    this.loadNavbarJSON();
  },
  render: function(){
    return(
      <nav className="navbar navbar-default navbar-fixed-top" role="navigation">
        <div className="container-fluid">
          <div className="navbar-header">
            <NavbarBrand />
          </div>
          <NavbarLinks data={this.state.data} />
        </div>
      </nav>
    );
  }
});

var Header = React.createClass({
  render: function(){
    return(
      <Navbar />
    );
  }
});

React.renderComponent(
  <Header />,
  document.getElementById('render')
);
javascript state reactjs

4 回答

  • 9

    使用ES6，必须在React组件类的构造函数中创建初始状态，如下所示：

    constructor(props) {
    super(props)
    this.state ={
    // Set your state here
    }
}

    见this documentation .

    回复于
  • 49

    this.state.data 在您的示例中为null，因为 setState() 是异步的 . 相反，您可以将回调传递给setState，如下所示：

    loadNavbarJSON: function() {
    $.ajax({
      url: "app/js/configs/navbar.json",
      dataType: 'json',
      success: function(data) {
        console.log(data);

        this.setState({data: data}, function(){
          console.log(this.state.data);
        }.bind(this));

      }.bind(this),
    });
  }

    https://facebook.github.io/react/docs/component-api.html#setstate

    回复于
  • 9

    这个问题已经得到了解答，但是我来到这里的问题很容易发生在任何人身上 .

    我在我的一个方法中得到一个 console.log(this.state) 来记录 null ，因为我没有写：

    this.handleSelect = this.handleSelect.bind（this）;

    在我的构造函数中 .

    因此，如果您在某个方法中获得了this.state的 null ，请检查是否已将其绑定到组件 .

    干杯!

    Edit （因为@ tutiplain的问题）

    我为什么 this.state 为 this.state ？

    因为我在没有限制到我的类（我的handleSelect方法）的方法中写了 console.log(this.state) . 这导致 this 指向对象层次结构中较高的某个对象（很可能是 window 对象），该对象没有名为 state 的属性 . 因此，通过将 handleSelect 方法绑定到 this ，我确信每当我在该方法中编写 this 时，它将指向该方法所在的对象 .

    我鼓励你为这个here读一个非常好的解释 .

    回复于
  • 6

    更实际的答案，使用ES7类：

    export class Counter extends React.Component {
  state = { data : [] };
  ...
}

    ES6课程（alredy被回答）

    export class Component extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data : [] };
  }
  ...
}
    回复于

相关问题