javascript - ReactJS - 无法打印出待办事项，this.props.todos.map 不是函数

Question

我是 React 新手，我正在尝试从 GET 请求中打印出一些数据并将它们打印出来，但我遇到了 Uncaught TypeError: this.props.todos.map is not a function - 错误。

如果我在成功函数上更改 this.setState({data: data}) 我可以在我的控制台中获取数据，但是有没有快速简单的方法来解决这个问题以打印数据？

App.js

import React, { Component } from 'react';

import $ from 'jquery';
import Todos from "./Components/Todos"


class App extends Component {
  constructor(){
    super();
    this.state = {
      todos:[]
    }
  }
  getTodos(){
    $.ajax({
      type: "GET",
      url: 'url',
      dataType:'json',
      headers: {
        Authorization: "Basic " + btoa("username" + ":" + "password")
      },
      cache: false,
      success: function(data){
        this.setState({todos: data}, function(){
          console.log(this.state);
        });
      }.bind(this),
      error: function(xhr, status, err){
        console.log(err);
      }
    });
  }
  componentWillMount(){
    this.getTodos();
  }
  componentDidMount(){
    this.getTodos();
  }

  render() {
    return (
      <div className="App">
        <Todos todos={this.state.todos}/>
      </div>
    );
  }
}

export default App;

Todos.js

import React, { Component } from 'react';
import TodoItem from './TodoItem';

class Todos extends Component {
  render() {
    let todoItems;
    if(this.props.todos){

      todoItems = this.props.todos.map(todo => {
        return (
          <TodoItem key={todo.code} todo={todo} />
        );
      });
    }
    return (
      <div className="Todos">
        <h3>Results:</h3>
        {todoItems}
      </div>
    );
  }
}

export default Todos;

TodoItem.js

import React, { Component } from 'react';

class TodoItem extends Component {
  render() {
    return (
      <li className="Todo">
        <strong>{this.props.todo.code}</strong>
      </li>
    );
  }
}


export default TodoItem;

来自控制台日志的片段:

Answer 1

待办事项必须始终是一个数组。因此，在您的成功函数中像这样更改 setState。

this.setState({todos: (data.resources ? data.resources : [])}, function(){
          console.log(this.state);
        });