Javascript &引用；TypeError:tasks.map不是函数；

我正试图从Django Rest框架API调用字典，以便在前端查看。使用Django后端和Reactjs前端。通过一些研究，我似乎得到了这个错误，因为

map（）

函数只接受数组，而我的API返回了一个字典（我想是这样）

我该如何解决这个问题？我不熟悉javascript&对代码的混乱提前表示歉意。请参见下面我的

App.js

：

App.js

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

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            todoList: [],
        }

        this.fetchTasks = this.fetchTasks.bind(this)
    };

    componentWillMount() {
        this.fetchTasks()
    }

    fetchTasks() {
        fetch('http://127.0.0.1:8000/api/api-overview')
            .then(response => response.json())
            .then(data =>
                this.setState({
                    todoList: data
                })
            )
    }

    render() {
        var tasks = this.state.todoList
        return (
            <div className="container">
                {tasks.map(function (task, index) {
                    return (
                        <div className="center-column">
                            <div className="item-row">
                                <div key={index} className="centered">
                                    <span>{task.bitcoin_symbol}</span>
                                </div>
                            </div>
                        </div>
                    )
                })}
            </div>
        );
    }
}

export default App;

import React，{Component}来自'React'；
导入“/App.css”；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
托多利斯特：[]，
}
this.fetchTasks=this.fetchTasks.bind（this）
};
组件willmount（）{
this.fetchTasks（）
}
fetchTasks（）{
取（'http://127.0.0.1:8000/api/api-概述'）
.then（response=>response.json（））
。然后（数据=>
这是我的国家({
托多利斯特：数据
})
)
}
render（）{
var tasks=this.state.todoList
返回(
{tasks.map（函数（任务，索引）{
返回(
{task.bitcoin_symbol}
)
})}
);
}
}
导出默认应用程序；

API响应：

---

您正在获取单个对象，而不是数组

.map（）

是一种方法，它运行在可编辑项（数组、字符串等-可以迭代的对象）上，并从每个输入元素创建一个新的输出元素。在react中，我们主要使用它将项目转换为其JSX（react/html）表示形式。在处理单个对象时，应直接访问该对象：

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

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            bitcoinData = null
        }

        this.fetchBitcoinData = this.fetchBitcoinData.bind(this);
    };

    componentWillMount() {
        this.fetchBitcoinData();
    }

    fetchBitcoinData() {
        fetch('http://127.0.0.1:8000/api/api-overview')
            .then(response => response.json())
            .then(data =>
                this.setState({
                    bitcoinData: data
                });
            );
    }

    getBitcoinRepresentation() {
        var bitcoinData = this.state.fetchBitcoinData;

        if (!bitcoinData) {
            return <div>Loading...</div>;
        }
        else {
            return (
                <div className="container">
                    <div>{bitcoinData.bitcoin_symbol}</div>
                    <div>{bitcoinData.bitcoin_price}</div>
                    <div>{bitcoinData.bitcoin_dailychangeinprice}</div>
                </div>
            );
        }
    }

    render() {
        return getBitcoinRepresentation();
    }
}

export default App;

import React，{Component}来自'React'；
导入“/App.css”；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
bitcoinData=null
}
this.fetchBitcoinData=this.fetchBitcoinData.bind（this）；
};
组件willmount（）{
this.fetchBitcoinData（）；
}
fetchBitcoinData（）{
取（'http://127.0.0.1:8000/api/api-概述'）
.then（response=>response.json（））
。然后（数据=>
这是我的国家({
比特币数据：数据
});
);
}
getBitcoinRepresentation（）{
var bitcoinData=this.state.fetchBitcoinData；
如果（！bitcoinData）{
返回装载。。。；
}
否则{
返回(
{比特币数据。比特币\符号}
{比特币数据。比特币价格}
{比特币数据。比特币_dailychangeinprice}
);
}
}
render（）{
返回getBitcoinRepresentation（）；
}
}
导出默认应用程序；

提取完成后，数据是什么？我假设它不是一个数组“返回字典”，可能不是因为JavaScript没有字典。知道

数据是什么，是解决这个问题的关键。@evolutionxbox感谢您的回复！请看上面的编辑，我已经包括了我的Django Rest API的屏幕截图。这些数据看起来像一本字典，这就是为什么我这么认为，但谢谢你的澄清。我怎么知道数据是什么？谢谢你的更新，但是屏幕截图没有文本有用。我看到的是
数据
是一个对象。这就是为什么会有错误。那么，您希望映射对象上的哪个属性？