Question

我正在通过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

Answer 1

您在渲染方法中使用this.state语法错误，并在this.state.data中使用默认值

＆＃13;

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')
)

＆＃13;

<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" />

＆＃13;

Answer 2

首先，你有一个错字，改变：

{this.states.data.map((item) => {
  return <li>item.data</li>
})}

致：

{this.state.data.map((item) => {
  return <li>item.data</li>
})}

此外，在您提取数据之前，state.data为undefinded且没有方法.map()。
将其更改为空数组：

constructor(props) {
  super(props);
  this.state = {
    data: undefined
  }
}

为：

constructor(props) {
  super(props);
    this.state = {
      data: []
  }
}

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

2 个答案: