return не видит блок

Question

Хочу сделать вывод информации по API. Подключил через fetch, далее хочу пройтись по масиву, но return не видит вообще самого блока который в нём. Если без {item.map) - нормально, если хочу пройтись с помощью map, то не return видит блок.

Подскажите, в чём проблема?

import React, {useState, useEffect} from 'react'
import girlPass from '../img/girl.png'

function Card() {

    const [item, setItem] = useState([])

    useEffect(()=> {
        fetch('https://62823a7fed9edf7bd880d6a4.mockapi.io/passports').then((res)=> {
            return res.json()
        }).then((json)=> {
            setItem(json)
        })
    }, [])

    console.log(item); 



    {item.map((obj)=> {
        return (
            <div className='card'>
            <div className='card-wrapper'>
                <div className='card-header'>
                    <span className='card-country'>Україна/Ukraine</span>
                </div>
                <div className='card-general'>
                    <div className='card-info__top'>
                        <div className='card-info__img'><img src={girlPass} alt="img"/></div>
                        <div className='card-info__text'>
                            <div className='card-info__text__birth'>
                                <span className='card-info__title'>Дата народження:</span>
                                <span className='card-info__subtitle'>16.08.2002</span>
                            </div>
                            <div className='card-info__text__expiry'>
                                <span className='card-info__title'>Дiйсний до:</span>
                                <span className='card-info__subtitle'>12.08.2023</span>
                            </div>
                            <div className='card-info__text__sex'>
                                <span className='card-info__title'>Стать:</span>
                                <span className='card-info__subtitle'>Ж/F</span>
                            </div>
                        </div>
                    </div>
                    <div className='card-info__bottom'>
                        <div className='card-info__text__surname'>
                            <span className='card-info__title'>Прiзвище/Surname</span>
                            <span className='card-info__subtitle'>Шевченко/Shefchenko</span>
                        </div>
                        <div className='card-info__text__name'>
                            <span className='card-info__title'>Iм’я/Name</span>
                            <span className='card-info__subtitle'>Анна/Anna</span>
                        </div>
                        <div className='card-info__text__patronimyc'>
                            <span className='card-info__title'>По батьковi/Patronimyc</span>
                            <span className='card-info__subtitle'>Олександрiвна</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        )
    })
}



export default Card

Answer 1

Привожу код ниже как доказательство того факта, что ошибку Вы явно ищите не в том месте, оба приведенных вами примера хорошо работают.

Дргугое дело, валидны у Вас данные или нет. Именно по этой причине нужен код в вопросе, желательно воспроизводящий проблему, в данном случае нужно хотя бы убедится что в item находится массив, т.е. именно он приходит с сервера, если там объект то Вы не сможете применить map - будет ошибка в консоли и вывода не будет.

Cтрелочные функции не требуют return если вы не оборачиваете тело функции в {} Можно писать так {item.map((obj, id) => <div key={id}>133</div>)} скобки () нужны только для многострочной верстки.

И один из моментов которые возможно Вы упустили - посмотрите что выводится в консоли.

<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin ></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin ></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>

<div id="root"></div>

<script type="text/babel">
      window.useState = React.useState;
      window.useEffect = React.useEffect
      
      const A = () => {
        return ( <div>323</div> )
      }

      const B = () => {
        const item = [1,2,3];

        return (
          <div>
            {item.map((obj, id) => { return ( <div key={id}>133</div> ) })}
            {item.map((obj, id) => <div key={id}>123</div>)}
          </div>
        )
      }

      const App = () => {
        return (
          <div>
            <A/>
            <B/>
          </div>
        );
      };

      ReactDOM.render(<App />, document.getElementById("root"));
    </script>
  </body>
</html>

Вот примерный код:

<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin ></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin ></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>

<div id="root"></div>

<script type="text/babel">
  window.useState = React.useState;
  window.useEffect = React.useEffect
  window.Fragment = React.Fragment

  const Component = () => {
    const [item, setItem] = useState([])
    useEffect(()=> {
      setItem([1,2,3])
    }, [])

    return (      
      <Fragment>  
        {item.map((obj, id)=> (
               <div className='card' key={id}>
                 какой-то контент
               </div>
            ))
        }
      </Fragment> 
    )
  }

  const App = () => {
    return (
      <div>
        <Component/>
      </div>
    );
  };

  ReactDOM.render(<App />, document.getElementById("root"));
</script>

Answer 2

Весь ваш item.map должен быть внутри render, вот так:

return (<>
  {item.map((obj) => {
    return (
      <div className='card'>
        <div className='card-wrapper'>
          <div className='card-header'>
            <span className='card-country'>Україна/Ukraine</span>
          </div>
          <div className='card-general'>
            <div className='card-info__top'>
              <div className='card-info__img'><img src={girlPass} alt="img"/></div>
              <div className='card-info__text'>
                <div className='card-info__text__birth'>
                  <span className='card-info__title'>Дата народження:</span>
                  <span className='card-info__subtitle'>16.08.2002</span>
                </div>
                <div className='card-info__text__expiry'>
                  <span className='card-info__title'>Дiйсний до:</span>
                  <span className='card-info__subtitle'>12.08.2023</span>
                </div>
                <div className='card-info__text__sex'>
                  <span className='card-info__title'>Стать:</span>
                  <span className='card-info__subtitle'>Ж/F</span>
                </div>
              </div>
            </div>
            <div className='card-info__bottom'>
              <div className='card-info__text__surname'>
                <span className='card-info__title'>Прiзвище/Surname</span>
                <span className='card-info__subtitle'>Шевченко/Shefchenko</span>
              </div>
              <div className='card-info__text__name'>
                <span className='card-info__title'>Iм’я/Name</span>
                <span className='card-info__subtitle'>Анна/Anna</span>
              </div>
              <div className='card-info__text__patronimyc'>
                <span className='card-info__title'>По батьковi/Patronimyc</span>
                <span className='card-info__subtitle'>Олександрiвна</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  })}
</>)

БЛОГ НА HUSL

return не видит блок

Ответы (2 шт):