599Item.js：12未熟悉的TypeError：product.map不是React的功能

Question

我将我的第一个反应作为练习来理解，但我会发现此错误

599Item.js：12 uck offeraght typeError：product.map在component item.js on Line.js中不是一个函数

。 的产品对象进行的产品对象，

import React, {useState, useEffect} from "react";
import '../App.css';
import 'materialize-css/dist/css/materialize.css';
import Count from './ItemCount';

export const Item =(({product}) =>  {

  const [sellProduct, setSellProduct] = useState(product);

  useEffect(() => { 
    setSellProduct({product}); 
  }, [product]);

  const mensaje = () => {
    alert ('Gracias por su compra');
  }

return (
    <>
    {
      sellProduct.map((item) => {
        return(
          <Count stock={item.stock} onAdd ={mensaje} >
            <div id= {item.id}>
              <h3>{item.name}</h3> - <small>{item.category}</small>
              <img src= {item.picture} alt="Producto" className="itemImg" />
              <p>{item.description}</p>
              <p>{item.price}</p>
            </div>          
          </Count>
        )
      })
    }
    </>
  )
});

expor default Item;

有一个是我以提取

然后将其传递给子组件，该组件将道具传递给项目组件，我复制两个itemListContainer（parent）

import React, { useEffect, useState } from "react";
import '../App.css';
import 'materialize-css/dist/css/materialize.css';  
import ItemList from './ItemList';


export const ItemListContainer =() =>  {


  
  const [swSell,setSwSell] = useState([])

  useEffect(() => {
    fetch('https://fakestoreapi.com/products')
      .then((res) => res.json())
      .then((data) => {
        setSwSell(data);
      })
      .catch((err) => {
        console.log(err);
      });
    }, []);

  return(
    <div className="parent">
      {
        swSell.map((item) =>(
          <div className="child" key={item.id}>
            <ItemList item={swSell} />
          </div>
        ))
      }
    </div>
    )}
export default ItemListContainer;

的代码Itemellist（儿童），这将传递给项目组成部分，

import React from "react";
import '../App.css';
import 'materialize-css/dist/css/materialize.css'; 
import Item from './Item';

export const ItemList = (({item}) =>  {
  return (
    <div className="child">
      {
        item.map((item) =>(
          <Item product= {item} />
        ))
      }
    </div>
  )
});

export default ItemList;

感谢您的帮助

Answer 1

在项目组件中而不是将

product.map((item)...

其替换为

product && product.map((item)...

Answer 2

错误：

product.map不是React

的功能

，因为product您将其设置为sellproduct不是array。它实际上是swsell数组的项目（对象）。

因此，首先，更改以下内容：

const ComponentName = (({ ... }) => {
   ...
})

进入：

const ComponentName = ({ ... }) => {
   ...
}

下一步，因为swsell状态是项目对象的集合，其中项目本身就是产品本身，那么您只需要两个组件： item item list < /strong>作为父母，项目作为渲染项目详细信息的孩子

const Item = ({item}) =>  {
    return (
        <div id= {item.id}>
             <h3>{item.name}</h3> - <small>{item.category}</small>
             <img src={item.image} width="100"/>
             <p>{item.description}</p>
             <p>{item.price}</p>
        </div> 
    )
};

function ItemList() {
    const [swSell,setSwSell] = React.useState([])

    React.useEffect(() => {
        fetch('https://fakestoreapi.com/products')
            .then((res) => res.json())
            .then((data) => {
                setSwSell(data);
            })
            .catch((err) => {
                console.log(err);
            });
    }, []);

    return (
        <div>
            {swSell.map((item) => (
                <div className="child" key={item.id}>
                    <Item item={item} />
                </div>
            ))}
        </div>
    );
}

ReactDOM.render(<ItemList />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>