TypeError: items.map is not a function ，如何解决这个错误答案

【问题标题】：TypeError: items.map is not a function , how to solve this errorTypeError: items.map is not a function ，如何解决这个错误
【发布时间】：2018-12-21 11:30:07
【问题描述】：

每次我运行代码时，它都会显示相同的错误。谁能解释这段代码有什么问题以及如何纠正它？项目在一个数组中，您可以在 url 'https://api.myjson.com/bins/8pyl4' 中查看它。

import React, { Component } from 'react';
import '../Stylesheet/bootstrap.min.css';



export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            items: [],
            isLoaded: false
        }
    }
    componentDidMount() {
        fetch('https://api.myjson.com/bins/8pyl4')
            .then(res => res.json())
            .then(json => {
                this.setState({
                    isLoaded: true,
                    items: json
                })
            });
    }
    render() {
        var { isLoaded, items } = this.state;
        if (!isLoaded) {
            return <div>Loading...</div>;
        }
        return (
            <div>

                <ul>
                    {items.map(item => (
                        <li key="{item.ibn}">
                            Name: {item.name}  , Author: {item.author}
                        </li> 
                    ))}
                </ul>
            </div>
        );
    }
}

【问题讨论】：

json 是一个对象，而不是一个数组，因此它没有 map 方法。
data.map is not a function的可能重复

标签： json reactjs

【解决方案1】：

您将 state[items] 设置为 json，但它是一个对象，而不是一个数组！继续改变：

this.setState({isLoaded: true, items: json});

到这里：

this.setState({isLoaded: true, items: **json.items**});

【讨论】：

【解决方案2】：

你应该写：

{items.map(item => {
  <li key={item.ibn}>
    Name: {item.name}  , Author: {item.author}
  </li> 
})}

【讨论】：

【解决方案3】：

所有 Json 数据都不是数组。只需检查您尝试传递给 map 函数的数据。映射函数采用数组数据。

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案4】：

试试

 componentDidMount() {
        fetch('https://api.myjson.com/bins/8pyl4')
            .then(res =>  this.setState({
                    isLoaded: true,
                    items: res.data.items
                })
            });
    }

您的res.data 将是

{  
    "items":[  
        {  
            "ibn":123,
            "name":"Harry Potter",
            "author":"J K Rowling",
            "genre":"fantasy",
            "publisher":"bloomsbury",
            "ebook":"yes",
            "audiobook":"yes",
            "summary":"the chosen one and he who must not be named",
            "rating":"5/5",
            "price":"500"
        },
        {  
            "ibn":456,
            "name":"Artemis Fowl",
            "author":"Eoin Colfer",
            "genre":"fantasy",
            "publisher":"viking press",
            "ebook":"yes",
            "audiobook":"yes",
            "summary":"the rich child theif and fairies",
            "rating":"5/5",
            "price":"540"
        },
        {  
            "ibn":789,
            "name":"war and Peace",
            "author":"Leo Tolstoy",
            "genre":"drama",
            "publisher":"wordsworth",
            "ebook":"yes",
            "audiobook":"yes",
            "summary":"the russian epic on war and peace after it",
            "rating":"5/5",
            "price":"700"
        },
        {  
            "ibn":135,
            "name":"metamorphosis",
            "author":"Franz Kafka",
            "genre":"absurdist fiction",
            "publisher":"kurt wolff",
            "ebook":"yes",
            "audiobook":"no",
            "summary":"a salesman turns into an insect",
            "rating":"4/5",
            "price":"400"
        },
        {  
            "ibn":791,
            "name":"coraline",
            "author":"Neil Gaiman",
            "genre":"dark fantasy",
            "publisher":"harper collins",
            "ebook":"yes",
            "audiobook":"yes",
            "summary":"the most adventurous person ever",
            "rating":"4.5/5",
            "price":"560"
        }
    ]
}

现在您需要从 JSON 中获取项目。

【讨论】：