реагирует js проблема с отображением данных в array.map ()

Question

laravel и реагирование js

Я пытаюсь получить данные из маршрута laravel и отобразить их в моем компоненте, когда я пытаюсь выполнить небольшой блок кода в функции array.map, она работает ссылка, показанная на этом изображении , также говорит о том, что зрение является неразрешаемой переменной, но оно работает и отображает данные

Теперь проблема здесь в том, что когда я пытаюсь использовать большие данные в файле 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-элементов, но когда я сдвигаю закрывающие скобки функции карты в конце, где я хочу их закрыть, я делает ошибку вот как выглядит код ошибки

Answer 1

Проблема с вашим кодом в том, что вы возвращаете несколько div внутри одного оператора return, когда он должен быть только один. Оберните все div внутри одного родительского div, и это сработает в операторе возврата карты.

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 может возвращать только один элемент.

Вам необходимо обернуть возвращаемые элементы функции, переданной в map, фрагментом реакции (https://reactjs.org/docs/fragments.html )

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