Я совершенствуюсь в reactjs. Я пытаюсь создать сайт электронной коммерции. Я использую Mock Api в качестве сервиса. Я могу перечислить свои данные в ProductList.js. но я не могу вызвать те же данные в ProductDetails.js. Я получаю "неопределенную" ошибку.
const ProductDetail = (props) => {
const { buttonLabel, className } = props;
const { name, description, price,id } = props;
const axios = require('axios');
const [modal, setModal] = useState(false);
const toggle = () => setModal(!modal);
const [dress, setDress] = useState([]);
useEffect(() => {
axios
.get(`https://5fd9d76f6cf2e7001737ead3.mockapi.io/api/v1/dress`)
.then(function (response) {
setDress(response.data);
})
.catch(function (error) {
console.info(error);
});
}, []);
const data = dress.map(item => {
return {
name: item.name,
description: item.description,
price:item.price,
id: item.id
}
})
return (
<div >
<ProductDetailButton onClick = {toggle}>Detay{buttonLabel}</ProductDetailButton>
<Modal isOpen = {modal} toggle = {toggle} key = {`${data.id}`} className = {className}>
<ModalHeader toggle = {toggle}>{`${data.name}`}</ModalHeader>
<ModalBody >
{`${data.price}`}
</ModalBody>
<ModalBody>
{`${data.description}`}
</ModalBody>
<ModalFooter>
<Button color = "secondary" onClick = {toggle}>
Kapat
</Button>
</ModalFooter>
</Modal>
</div>
);
Модальный отображается как вывод. Вместо данных написано "не определено". Как это исправить?
🤔 А знаете ли вы, что...
JavaScript активно развивается, и новые версии языка регулярно включают новые функции и улучшения.
Ваш API возвращает массив объектов, поэтому, если у вас есть ProductList, вам не следует выполнять вызов API в сведениях о продукте. Вы должны передавать предметы в качестве реквизита.
Пример.
const ProductList = () => {
const [showProduct, setShowProduct] = useState(null)
..... api call and data...
return (
<React.Fragment>
{data?.map(item => <div>{item.name} <button onClick = {() => setShowProduct(item)}> Show Item </button> </div> }
{ !!showProduct && <ProductDetails item = {showProduct} onClose = {() => setShowProduct(null) /> } //this will open up your modal
</React.Fragment>
)
}
то в деталях вашего продукта это должно быть что-то вроде.
const ProductDetails = ({ item, onClose }) => {
//your item details accessible here via props
return <Modal> <ModalBody> {item.name} </ModalBody><ModalFooter><Button onClick = {onClose}>Close</ModalFooter></Modal>
}
Посмотрев на ваш код, значение const data будет изменено. Но повторного рендеринга не произойдет, так как он не находится в состоянии. Другая проблема заключается в том, что data — это массив (карта возвращает массив). Чтобы вызвать как {data.name} данные должны быть объектом.
Поместите data в состояние
useState(()=> {
const data = Array.isArray(dress) && dress.map(item => {
return {
name: item.name,
description: item.description,
price:item.price,
id: item.id
}
}
// set the state
setData(data);
}, [dress]);