Блог

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

Вот JSON

 {id: 1, header: "Header 1", title: "Title 1", description: "Description 1",…} card_image: "http://localhost:8000/media/media/images/cards/card1_cMPijRQ.jpg" description: "Description 1" header: "Header 1" id: 1 logo_image: "http://localhost:8000/media/media/images/logos/1_g2pBgUP.png" main_img: "http://localhost:8000/media/media/images/main/1_sS1Yf60.jpg" tags: ["Finance", "E-commerce"] title: "Title 1"  

Я не могу отображать теги, на самом деле они отображаются один раз, а затем при обновлении отображается эта ошибка :

 TypeError: Cannot read properties of undefined (reading 'map') ProductInfo C:/personalworkspace/BP/front/src/components/ProductInfo.js:39  36 | lt;/divgt;  37 | lt;/Gridgt;  38 | lt;Grid itemgt; gt; 39 | lt;div className="product tags flex container child"gt;  | ^ 40 | {props.tags.map((tagsList, i) =gt; (  41 | lt;Label size="tiny" as="a" image key={i}gt;  42 | {tagsList}  

Пожалуйста, обратите внимание, что label-это семантический тег пользовательского интерфейса. Спасибо за вашу помощь.

Когда вы вызываете удаленный API, пока запрос работает, теги не выполняются, поэтому они не определены. Вы можете использовать что-то вроде этого:

 {(props.tags || []).map((tagsList, i)   

Или вы можете использовать загрузчик, чтобы отобразить счетчик, пока запрос находится в ожидании.