在访问Next.js中映射中的数据对象的值时，要变得不确定

Question

//从数据访问对象值时，我在MAP

/// ../data/section1

const data = [{
    id: 1,
    image: './images/homepage/xbox-games.png',
    text: 'Buy Xbox games and consoles',
}, {
    id: 2,
    image: './images/homepage/shop_surface_devices.webp',
    text: 'Shop surface devices',
}, {
    id: 3,
    image: './images/homepage/choose_your_ms_365.png',
    text: 'Choose your Microsoft 365',
}, {
    id: 4,
    image: './images/homepage/shop_windows_10.png',
    text: 'Shop Windows 10',
}]
export default data;

//实际组件中变得不确定

    import data from "../data/section1";
    
    const Section1 = () => {
    
      return (
        <>
            <div class="mx-20">
                {data.map((vals) => {
                  <div class="">
                    <img src={vals.image}/>
                    <p>{vals.text}</p>
                  </div>
                })}
            </div>
        </>
      )
    }
    
    export default Section1;

Answer 1

return JSX from the map

    import data from "../data/section1";
    
    const Section1 = () => {
    
    
      return (
        <>
            <div class="mx-20">
                {data.map((vals) => {
                  return (
                    <div class="">
                      <img src={vals.image}/>
                      <p>{vals.text}</p>
                    </div> 
                  )
                })}
            </div>
        </>
      )
    }
    
    export default Section1;

Answer 2

解决了问题导入数据；

我遇到了同样的问题，然后尝试了第一个括号，而不是第二个括号，然后从“ ../ data/section1”中

const Section1 = () => {

  return (
    <>
        <div class="mx-20">
            {data.map((vals) => (
              <div class="">
                <img src={vals.image}/>
                <p>{vals.text}</p>
              </div>
            ))}
        </div>
    </>
  )
}

export default Section1;