為什么map()函式在我的反應應用程式中不起作用？

所以我有一個顯示一些產品的常用容器，我從名為 data.js 的檔案中獲取產品資料（如 img、標題），并通過它進行映射以顯示它。

它看起來像這樣：

<div className="wrapper">
                {sliderItems.map((item)=>{
                    <div className="slide">
                    <div className="img_container">
                        <img src={item.img}/>
                    </div>
                    <div className="info_container">
                        <h1>{item.title}</h1>
                        <p>{item.desc}</p>
                        <button>Button</button>
                    </div>
                </div>
                })}
            </div>

我的 data.js 看起來像這樣：

import beats from './assets/beats.png';
import headphone from './assets/headphone.png';
import girl from './assets/girl.png';

export const sliderItems = [
    {
      id: 1,
      img: beats,
      title: "SUMMER SALE",
      desc: "DON'T COMPROMISE ON STYLE! GET FLAT 30% OFF FOR NEW ARRIVALS.",
      bg: "f5fafd",
    },
    {
      id: 2,
      img: headphone,
      title: "AUTUMN COLLECTION",
      desc: "DON'T COMPROMISE ON STYLE! GET FLAT 30% OFF FOR NEW ARRIVALS.",
      bg: "fcf1ed",
    },
    {
      id: 3,
      img: girl,
      title: "LOUNGEWEAR LOVE",
      desc: "DON'T COMPROMISE ON STYLE! GET FLAT 30% OFF FOR NEW ARRIVALS.",
      bg: "fbf0f4",
    },
  ];

但是由于某種原因，它不會顯示在容器中，就像頁面上完全是空的一樣。我在瀏覽器代碼中查找，'wrapper' div 只是空的：

所以我想知道地圖功能不起作用的原因是什么。

uj5u.com熱心網友回復：

你沒有從 map() 函式回傳。這應該解決它：

             <div className="wrapper">
                    {sliderItems.map((item)=> ( <div className="slide">
                        <div className="img_container">
                            <img src={item.img}/>
                        </div>
                        <div className="info_container">
                            <h1>{item.title}</h1>
                            <p>{item.desc}</p>
                            <button>Button</button>
                        </div>
                    </div>)
                    )}
                </div>

uj5u.com熱心網友回復：

看來您沒有從map. 試試這個：

<div className="wrapper">
                {sliderItems.map((item)=>(
                    <div className="slide">
                    <div className="img_container">
                        <img src={item.img}/>
                    </div>
                    <div className="info_container">
                        <h1>{item.title}</h1>
                        <p>{item.desc}</p>
                        <button>Button</button>
                    </div>
                </div>
                ))}
            </div>

uj5u.com熱心網友回復：

您需要在地圖中添加回傳 html

<div className="wrapper">
                {sliderItems.map((item)=>{
                return(
                    <div className="slide">
                    <div className="img_container">
                        <img src={item.img}/>
                    </div>
                    <div className="info_container">
                        <h1>{item.title}</h1>
                        <p>{item.desc}</p>
                        <button>Button</button>
                    </div>
                </div> );
                })}
            </div>

標籤：

上一篇：React函式式組件，setState和不變性

下一篇：反應原生嵌套堆疊導航顯示空螢屏