我如何将 map 数据从 state 传到组件 prop？

Question

To start with I'm a beginner. Any help would be appreciated. So I'm getting my data from mongoDB atlas using node+express API. I'm successfull at getting the array to show up in console log using following code.

const [product, setProduct] = useState();
    const url = "http://localhost:5000/api/items";

    useEffect(() => {
        axios.get(url).then((res) => {
            setProduct(res.data);
            // setProduct(
            //     JSON.stringify({
            //         title: setProduct.title,
            //         price: setProduct.price, 
            //         image: setProduct.image,
            //         details: setProduct.details,
            //     })
            // );
        })
    }, [url])
    console.log(product)

The console log displays the array properly as collection named 'items' with content of arrays. As you can see I tried to stringify the response as the response returns JSON but again I didn't know how to map Following is the code where I tried to map the contents like id, name etc as props to component.

              <div>
                  {product.map((product) => {
                          <Product name={product.title} />
                  })}
              </div> 

When I do this I get error that the map is not a function. I don't know what I'm doing wrong here. I know I'm supposed to use redux or reducer/context here but I want to get this to work before updating it with those.

[.[Response from res:data][1]][1] [1]: https.//i.stack.imgur.com/auxvl.png

Answer 1

On the first render the value for types will be undefined ( on sync code execution ), try using it as

<div>
   {product?.map((product) => {
   <Product name={product.name} />
   })}
   </div> 

? will make sure to run map once value for types is there ( also make sure it is mappable ( is an array ))

Answer 2

you didnt get yours products.

As we can see from screenshot

res.data equal to object with one property items : res.data = {items: []} and we need to take/access to these items

use this: setProducts(res?.data?.items || [])

const [products, setProducts] = useState();
    useEffect(() => {
        axios.get(url).then((res) => {
            setProducts(res?.data?.items || []);
        })
    }, [url])

              <div>
                  {products?.map((product) => {
                          <Product name={product.title} />
                  })}
              </div>