ReactJS this.state null

Question

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

我尝试将其设置为组件状态，然后通过道具将其传递给导航栏链接，但我收到“未捕获的类型错误：无法读取 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')
);

Answer 1

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

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

见this documentation。

Answer 2

这个问题已经回答了，但是我遇到了一个任何人都容易遇到的问题。

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

this.handleSelect = this.handleSelect.bind(this);

在我的构造函数中。

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

干杯！

编辑（因为@tutiplain的问题）

为什么null 换成this.state？

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

我鼓励您阅读关于 here 的非常好的解释。

Answer 3

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

Answer 4

关于使用 ES7+ 类的更多实际答案：

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

ES6 类（已经回答）

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

Answer 5

我有类似的问题。就我而言，webpack-dev-server 没有在运行中正确重新编译我的东西。
我刚刚重新启动了开发服务器以使其再次工作。