Блог

Я разместил товары на странице, а затем получил ошибку, я не могу понять, с кем это связано.

            const {device} = useContext(Context)

  91 | </div>
> 92 | <div className="inner-display-collection">
     | ^  93 |     {device.devices.map(device =>
  94 |         <CartGoods device={device}/>
  95 |     )}        
 

сам продукт:

    const CartGoodr = ({device}) => {
   const history = useHistory()
   return(
    <div className="inner-display-collection">
        <a key={device.id} href="" className="active-cart" onClick={() => history.push(DEVICE_ROUTE   '/'   device._id)} style={{textDecoration: 'none'}}>
            <div className="cart-good">
                <div className="wrapper-cart">
                    <img className="foto-cart" src="" alt="" />
                    <div className="display-info-cart">
                        <h3 className="text-price-cart" >{`${device.prise}₽`}</h3>
                    </div>
                    <div className="display-info-cart">
                        <h4 className="text-decription-cart">{device.descriptionMine}</h4> 
                    </div>  
                </div>
            </div>
        </a>
    </div>
   )
 }

  export default CartGoodr
 

то есть все должно получиться, но эта ошибка вылетает

Проблема в том, что ваш объект device.devices пуст. Это должен быть массив, чтобы иметь доступ к этой функции .map, потому что она доступна только в массивах.

Если вы попытаетесь консольно зарегистрировать device.devices непосредственно перед отображением элементов, вы увидите, что он выводит скорее неопределенное значение, нуль, число или строку вместо массива

 const {device} = useContext(Context)
console.log(device.devices) // here
 

Если эти данные извлекаются через запрос api, вы можете добавить свойство загрузки на устройство, установить его в значение true перед выполнением запроса API, а при извлечении данных установить значение false, а затем использовать его следующим образом:

 if(device.loading){
  return <p>Loading the device...</p>
}

// and here map through the device.devices or any other content of your component