Question

我是新手做出反应，我正在尝试从GET请求中打印出一些数据并将其打印出来，但我得到了Uncaught TypeError：this.props.todos.map不是函数 - 错误。

如果我在成功功能上更改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

todos必须始终是一个数组。所以在你的成功函数中改变这样的setState。

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

Answer 2

首先调用this.getTodos()两次只是在componentDidMount()方法中调用它是没用的，还有一件事你需要注意，组件TodoItem.js将不会产生任何影响值this.props.todo.code以避免您需要将此问题添加到TodoItem.js

中

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

Array.prototype.map()期待一个数组，所以如果你试图将一个未定义的值传递给它，它会自动输出一个错误，我相信你的应用就是这种情况

在尝试我的解决方案之前，还需要做一件事this.state.todo

Answer 3

您还需要绑定getTodos函数以引用其中的类的范围。所以在构造函数中绑定它：

this.getTodos = this.getTodos.bind(this)

ReactJS - 无法打印todos，this.props.todos.map不是一个函数

3 个答案: