React 给我错误 TypeError: XXX.map is not a function [重复]

Question

我是 React 新手，它给了我下面的错误，我无法解决。我在网上搜索，很多人都遇到过同样的问题，但是“地图”是一个内置函数，为什么说它不是一个函数？

import React, { Component } from 'react';

export class UrunlerComponentList extends Component {
    displayName = UrunlerComponentList.name

    constructor(props) {
        super(props);
        this.state = { urunler_: [], loading: true };

        fetch('http://localhost:55992/api/search/arama?q=&PageIndex=1')
            .then(response => response.json())
            .then(data => {
                this.setState({ urunler_: data, loading: false });
            });
    }

    static renderUrunlerTable(urunler_) {
        return (
            <table className='table'>
                <thead>
                    <tr>
                        <th>SKU</th>
                        <th>Name</th>
                    </tr>
                </thead>
                <tbody>
                    {urunler_.map(urun =>
                        <tr>
                            <td>{urun.SKU}</td>
                            <td>{urun.Name}</td>
                        </tr>
                    )}
                </tbody>
            </table>
        );
    }

    render() {
        let contents = this.state.loading
            ? <p><em>Loading...</em></p>
            : UrunlerComponentList.renderUrunlerTable(this.state.urunler_);

        return (
            <div>
                <h1>Urunler</h1>
                <p>This component demonstrates fetching data from the server.</p>
                {contents}
            </div>
        );
    }
}

我调用的 webapi 返回下面的值...

{
    "$id": "1",
    "RecordCount": 879,
    "products": [
        {
            "$id": "2",
            "Id": 17034,
            "BrandId": 3,
            "SKU": "7436B003-1082",
            "Name": "xxxxxxxx",
            "InStock": 1,
            "URL": "xxxxxxxxxx",
            "Description": "xxxxxxxxxxxxxxxxx",
            "Price": 9.90,
            "DiscountRatio": 0.00,
            "TechnicalDetail": "xxxxxxxxxxxxxxxxx",
            "ImageUrl": "7436Bxxxxxx.jpg",
            "Active": true,
            "CreatedDate": "2019-07-20T11:36:35.333",
            "Brand": null,
            "CartDetails": [],
            "OrderDetails": [],
            "ProductCategoryRelations": [],
            "ProductColorRelations": [],
            "ProductFileRelations": [],
            "ProductPropertyRelations": []
        },

Answer 1

确保从您的 fetch 调用返回的值是 array 而不是 undefined，因为您正在将该值设置为您的状态。

fetch('http://localhost:55992/api/search/arama?q=&PageIndex=1')
            .then(response => response.json())
            .then(data => {
                // make sure 'data' is an array
                this.setState({ urunler_: data, loading: false });
            });

Answer 2

           <tbody>
                {typeof urunler_ !== 'undefined' && urunler_.length > 0 ? 
               (urunler_.map(urun =>
                    <tr>
                        <td>{urun.SKU}</td>
                        <td>{urun.Name}</td>
                    </tr>
                )):(<tr><</tr>)}
            </tbody>

Answer 3

这应该可以解决它。数据本身是一个对象而不是数组。我猜你想分配产品。

...
.then(({products}) => this.setState({ urunler_: products, loading: false }))
...