Question

laravel和js反应

当我尝试在array.map函数下的小代码块尝试工作时，我试图从laravel路由中获取数据并将其映射到我的组件中link shown in this image 也说视觉是无法解析的变量，但是它可以工作并渲染数据

现在的问题是，当我在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函数的右括号时，会出错 here how error code looks

Answer 1

您的代码存在的问题是，当一个div返回值应该仅为一个时，您将在单个return语句中返回多个div。将所有div包装在一个父div中，它将在map return语句中起作用。

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函数只能返回单个Element。

您需要使用React Fragment（https://reactjs.org/docs/fragments.html）包装传递给map的函数的返回元素

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

用渲染array.map（）中的数据来反应js问题

2 个答案: