Laravel + React: this.state.tasks.map не является функцией

Question

Я не могу перебрать элементы, которые я ввел в состояние из фиктивного API, получить конечную точку:

Это весь мой компонент:

import React, {Component} from 'react';
import ReactDOM from 'react-dom';

class TaskList extends Component {
    constructor() {
        super();
        this.state = {
            tasks: [], // I set the empty state for now
        }
    }

    componentDidMount() {
        fetch('/api/tasks') // I fetch the data
            .then(response =>{
                return response.json();
            })
            .then(tasks=>{
                this.setState({tasks}); // I put the data into the state
            });
    }

    renderTasks() {
        return this.state.tasks.map(task => { // Here I want to iterate over the state and it fails
            return (
                <li>{task.title}</li>
            );
        })
    }

    render() {
        return(
            <ul>
                {this.renderTasks()}
            </ul>
        );
    }
}

export default TaskList;

if (document.getElementById('app')) {
    ReactDOM.render(<TaskList/>, document.getElementById('app'));
}

Функция map не видит данные.Почему?

app.js: 57174 Uncaught TypeError: this.state.tasks.map не является функцией

Я могу консольный журнал console.log(this.state) внутри renderTasks() и получаю:

Answer 1

функция карты может применяться только к массиву, а не к объекту, как показано на рисунке tasks это объект, но tasks.data это массив.Вы должны установить состояние следующим образом:

.then(tasks=>{
          this.setState({tasks: tasks.data}); // putt array rather than object
  });

Это также может быть достигнуто путем (если вышеупомянутое решение не применяется):

this.state.tasks.data.map();

Answer 2

Попробуйте выполнить следующее:

renderTasks() {
    if (this.state.tasks.hasOwnProperty('data')) {
        return this.state.tasks.data.map(task => { // Here I want to iterate over the state and it fails
            return (
                <li>{task.title}</li>
            );
        })
    } else {
        return (null);
    }
}

, когда компонент визуализируется в первый раз, использование this.state.tasks.data.map завершится неудачно, поскольку данные не являются ключом в this.state.tasks, поскольку выборка запускается только после DidMount().

Что это делает, если this.state.tasks имеет ключ данных, а затем сопоставить эти данные с другим мудрым возвращением null.

Answer 3

Вы пытаетесь отобразить объект, который содержит массив данных.Вы должны отобразить массив данных внутри объекта задач :)

  renderTasks() {
            const {tasks: {data}} = this.state;
            return ([] || data).map(task => { // Here I want to iterate over the state and it fails
                return (
                    <li>{task.title}</li>
                );
            })
        }