Question

每次我运行代码时，它都会显示相同的错误。谁能解释此代码有什么问题以及如何纠正它？项目位于一个数组中，您可以在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>
        );
    }
}

Answer 1

您将您的 state [items] 设置为 json ，但这是一个对象，而不是数组！继续进行更改

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

到 this.setState（{isLoaded：true，项目： json.items }）;

Answer 2

您应该写：

GROUP BY

Answer 3

尝试

JAXBContext

您的JAXBContext将是

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

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

TypeError：items.map不是函数，如何解决此错误

3 个答案: