通过ajax请求更新状态，但状态仍未定义

debugcn 发表于 Dev

瑙曼·艾哈迈德（Nauman Ahmad）

我正在通过对服务器的ajax请求来更新状态。我正在从服务器接收数据，但是由于某种原因状态不会更新，并且在尝试迭代数组时显示为未定义。

class TodoList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: undefined
    }
  }

  componentWillMount() {
    request
      .get('http://localhost:8080/api/todo')
      .end(function(err, res) {
        this.setState({data: res});
      }.bind(this));
  }

  render() {
    return (
      <div>
        <h1>Todo Items</h1>
        <ul>
          {this.states.data.map((item) => {
            return <li>item.data</li>
          })}
        </ul>
      </div>
    );
  }
}

控制台日志

Uncaught TypeError: Cannot read property 'data' of undefined
Uncaught TypeError: Cannot read property '_currentElement' of null

塞里·巴拉尼克（Serhii Baraniuk）

您使用this.statein render方法和默认值in犯了语法错误this.state.data

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

  componentWillMount() {
    /*request
      .get('http://localhost:8080/api/todo')
      .end(function(err, res) {
        this.setState({data: res});
      }.bind(this));*/
  }

  render() {
    return (
      <div>
        <h1>Todo Items</h1>
        <ul>
          {this.state.data.map((item) => {
            return <li>item.data</li>
          })}
        </ul>
      </div>
    );
  }
}

ReactDOM.render(
  <TodoList />,
  document.getElementById('app')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app" />

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。