时间戳

首页 > 解决方案 > TypeError：products.map 不是函数 - React JS

javascript - TypeError：products.map 不是函数 - React JS

问题描述

因此，TypeError: products.map is not a function当我尝试循环或映射当前处于我状态的对象时出现错误，我从 API 获取产品并将它们放入我的状态并尝试在我的状态下显示对象。

HomeScreen.js

import React, {useState} from 'react'
import { Card } from 'react-bootstrap'
function HomeScreen() {
    const [products, setProducts] = useState([])
    const requestMetadata = {
        mode: 'no-cors',
        method:'GET',
        headers: {
            'Content-Type': 'application/json'
        }
    };
    fetch('http://localhost:8000/api/products/', requestMetadata).then(product => setProducts({product}))
    return (
        <div>
            {products.map(product => (
                <Card className="my-3 p-3 rounded">
            <Card.Img src={product.image} />
            <Card.Body>
            <Card.Title as="div">
                <strong>{product.name}</strong>
            </Card.Title>
            <Card.Text as="div">
            
            </Card.Text>
            <Card.Text as="h3">
            ${product.price}
            </Card.Text>
            </Card.Body>
        </Card>
            ))}
        </div>
    )
}

export default HomeScreen

标签： javascriptreactjs

解决方案

如果您要获取数组列表，然后将其设置为数组对象。那么问题出在你的这一行fetch('http://localhost:8000/api/products/', requestMetadata).then(product => setProducts({product}))

详细问题在于：setProducts({product})

您必须使用 Array 来使用map 方法。

像这样更新它： fetch('http://localhost:8000/api/products/', requestMetadata).then(product => setProducts(product || []))

改变的只是这个：setProducts(product || [])

推荐阅读