Javascript 拉威尔+；反应：this.state.tasks.map不是一个函数

我无法迭代从伪API get端点进入状态的项：

这是我的整个组件：

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

import React，{Component}来自'React'；
从“react dom”导入react dom；
类任务列表扩展组件{
构造函数（）{
超级（）；
此.state={
任务：[]，//我现在设置为空状态
}
}
componentDidMount（）{
fetch（'/api/tasks'）//我获取数据
。然后（响应=>{
返回response.json（）；
})
。然后（任务=>{
this.setState（{tasks}）；//我将数据放入状态
});
}
renderTasks（）{
返回this.state.tasks.map（task=>{//这里我想迭代状态，但它失败了
返回(
{task.title}
);
})
}
render（）{
返回(

{this.renderTasks（）}

);
}
}
导出默认任务列表；
if（document.getElementById（'app'））{
ReactDOM.render（，document.getElementById（'app'））；
}

函数

map

未看到数据。为什么?

app.js:57174未捕获类型错误：this.state.tasks.map不是 作用

我可以在

renderTasks（）

中控制台log

console.log（this.state）

并获得：

---

您尝试在保存数据数组的对象上进行映射。您应该映射到tasks对象内的数据数组：）

renderTasks（）{
const{tasks:{data}}=this.state；
return（[]| | data）.map（task=>{//这里我想迭代状态，但失败了
返回(
{task.title}
);
})
}

您尝试映射到保存数据数组的对象上。您应该映射到tasks对象内的数据数组：）

renderTasks（）{
const{tasks:{data}}=this.state；
return（[]| | data）.map（task=>{//这里我想迭代状态，但失败了
返回(
{task.title}
);
})
}

映射功能只能应用于数组而不能应用于对象，如图所示

任务
是对象，但
任务。数据
是数组。应按如下方式设置状态：

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

这也可以通过以下方式实现（如果未采用上述解决方案）：

映射功能只能应用于数组而不能应用于对象，如图所示
tasks
是对象，但
tasks。数据
是数组。应按如下方式设置状态：

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

这也可以通过以下方式实现（如果未采用上述解决方案）：

请尝试以下操作：

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);
    }
}

renderTasks（）{
if（this.state.tasks.hasOwnProperty（'data'））{
返回this.state.tasks.data.map（task=>{//这里我想迭代状态，但它失败了
返回(
{task.title}
);
})
}否则{
返回（空）；
}
}

当组件第一次呈现时，使用
this.state.tasks.data.map
将失败，因为数据不是
this.state.tasks
中的键，因为只有在
DidMount（）之后才会触发获取

这样做的目的是，如果this.state.tasks具有数据键，则通过该数据映射，否则返回null。
请尝试以下操作：

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);
    }
}

renderTasks（）{
if（this.state.tasks.hasOwnProperty（'data'））{
返回this.state.tasks.data.map（task=>{//这里我想迭代状态，但它失败了
返回(
{task.title}
);
})
}否则{
返回（空）；
}
}

当组件第一次呈现时，使用
this.state.tasks.data.map
将失败，因为数据不是
this.state.tasks
中的键，因为只有在
DidMount（）之后才会触发获取

这样做的目的是，如果this.state.tasks具有数据键，则通过该数据映射，否则返回null。
您是否忘记解析JSON？我的tl看起来像是在试图映射一个字符串？这是你的答案，你不能在对象上使用map（），我不能在数组上添加数据
返回这个.state.tasks.data.map（task=>{
，但这不起作用。我是瞎了吗？我遗漏了一些东西…是的，你应该只在任务不是空的情况下尝试映射。）现在它会在第一次中断，因为数据键不存在于空任务数组中。我编辑了我的答案，所以现在如果数据未定义，它将在第一次映射到空数组：）你忘记解析JSON了吗？我看起来好像它试图映射到字符串上？这是你的答案，你不能使用map（）在对象上我添加数据以处理数组
返回此.state.tasks.data.map（task=>{
但这也不起作用。我是瞎子吗？我缺少一些东西…是的，只有在任务不是空的情况下，你才应该尝试映射。）现在它会第一次停止，因为空任务数组中不存在数据键。我编辑了我的答案，所以现在如果数据未定义，它将在第一次映射到空数组：）这就成功了。我应该从
任务.data
设置状态。然后我可以通过
映射返回这个.state.tasks.map（task=>
。该死的JS框架！讨厌它们。谢谢你Umair。这就成功了。我应该从
tasks.data
设置状态。然后我可以通过
映射返回这个。state.tasks.map（task=>
。该死的JS框架！讨厌它们。谢谢Umair）。