用 array.map() 中的渲染数据反应 js 问题

Question

laravel 和反应js

我正在尝试从laravel路由获取数据并将其映射到我的组件中，当我尝试使用数组下的小代码块时

现在的问题是，当我在 array.map 下尝试一些大数据时，它正在出错并且不渲染布局问题代码在这里

  <div className="services-pack">

                            {
                                sr.map(data =>(
                            <div className="Sr-item z-depth-1 wow fadeInRight slow">


                                <div className="icon-wrap">
                                    <div className="S-icon rounded-circle">
                                        <img  src="../../../img/fron-end.png" alt="icons fron-end"
                                             className="img-fluid"/>
                                    </div>
                                </div>
                                <div className="S-name">
                                    <h3>{data.frontEnd}</h3>
                                    <p>{data.frontEnd-intro}</p>
                                </div>

                            </div>



                            <div className="Sr-item z-depth-1 wow fadeInUp delay-1s slow">
                                <div className="icon-wrap">
                                    <div className="S-icon rounded-circle">
                                        <img src="../../../img/fron-end.png" alt="icons fron-end"
                                             className="img-fluid"/>
                                    </div>
                                </div>
                                <div className="S-name">
                                    <h3>{data.backtEnd}</h3>
                                    <p>{data.backtEnd-intro}</p>
                                </div>
                            </div>


                            <div className="Sr-item z-depth-1 wow fadeInUp delay-1s slow">
                                <div className="icon-wrap">
                                    <div className="S-icon rounded-circle">
                                        <img src="../../../img/fron-end.png" alt="icons fron-end"
                                             className="img-fluid"/>
                                    </div>
                                </div>
                                <div className="S-name">
                                    <h3>Wordpress Website</h3>
                                    <p>Elementor & Visual Composer Dev. </p>
                                </div>
                            </div>
                            <div className="Sr-item z-depth-1 wow fadeInUp delay-1s slower">
                                <div className="icon-wrap">
                                    <div className="S-icon rounded-circle">
                                        <img src="../../../img/fron-end.png" alt="icons fron-end"
                                             className="img-fluid"/>
                                    </div>
                                </div>
                                <div className="S-name">
                                    <h3>Analytics</h3>
                                    <p>Get Insights Into Who Is Browsing Site</p>
                                </div>
                            </div>
                                ) ) }



                                </div>

我想在所有这些 Sr-items 块中呈现我的所有数据，但是当我在我想关闭它们的最后移动 map function 的右括号时，我在这里出错了错误代码的外观

Answer 1

您的代码的问题是，当它应该只有一个时，您在单个 return 语句中返回了多个 div。 将所有 div 包装在一个父 div 中，它将在 map 返回语句中工作。

array.map(element => { return something;});

或者

array.map(element => something);

这两条线的结果是相等的。 您也不能像以前那样使用连字符（-）作为变量名

<p>{data.frontEnd-intro}</p>

和

<p>{data.backtEnd-intro}</p>

相反，这些应该是：

<p>{data.frontEndIntro}</p>

或者

<p>{data.frontEnd_intro}</p>

和

<p>{data.backtEndIntro}</p>

或者

{data.backtEnd_intro}

签出这个：

<div className='services-pack'>
        {this.state.sr.map((data) => (
          <div>
            <div className='Sr-item z-depth-1 wow fadeInRight slow'>
              <div className='icon-wrap'>
                <div className='S-icon rounded-circle'>
                  <img
                    src='../../../img/fron-end.png'
                    alt='icons fron-end'
                    className='img-fluid'
                  />
                </div>
              </div>
              <div className='S-name'>
                <h3>{data.frontEnd}</h3>
                <p>{data.frontEndIntro}</p>
              </div>
            </div>

            <div className='Sr-item z-depth-1 wow fadeInUp delay-1s slow'>
              <div className='icon-wrap'>
                <div className='S-icon rounded-circle'>
                  <img
                    src='../../../img/fron-end.png'
                    alt='icons fron-end'
                    className='img-fluid'
                  />
                </div>
              </div>
              <div className='S-name'>
                <h3>{data.backtEnd}</h3>
                <p>{data.backtEndIntro}</p>
              </div>
            </div>

            <div className='Sr-item z-depth-1 wow fadeInUp delay-1s slow'>
              <div className='icon-wrap'>
                <div className='S-icon rounded-circle'>
                  <img
                    src='../../../img/fron-end.png'
                    alt='icons fron-end'
                    className='img-fluid'
                  />
                </div>
              </div>
              <div className='S-name'>
                <h3>Wordpress Website</h3>
                <p>Elementor & Visual Composer Dev. </p>
              </div>
            </div>
            <div className='Sr-item z-depth-1 wow fadeInUp delay-1s slower'>
              <div className='icon-wrap'>
                <div className='S-icon rounded-circle'>
                  <img
                    src='../../../img/fron-end.png'
                    alt='icons fron-end'
                    className='img-fluid'
                  />
                </div>
              </div>
              <div className='S-name'>
                <h3>Analytics</h3>
                <p>Get Insights Into Who Is Browsing Site</p>
              </div>
            </div>
          </div>
        ))}
      </div>

Answer 2

问题是 JSX function 只能返回一个元素。

You need to wrap the returning elements of the function passed to the map with a React Fragment ( https://reactjs.org/docs/fragments.html )

sr.map((data) => (
  <React.Fragment> // or just <>
    <div></div>
    <div></div>
    // ...
  </React.Fragment> // or just </>
))