时间戳

首页 > 解决方案 > 从 api 接收数据时出现“未定义”问题

javascript - 从 api 接收数据时出现“未定义”问题

问题描述

我正在改进自己的 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.log(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>
        );

模态显示为输出。它说“未定义”而不是数据。如何解决？

标签： javascriptreactjsapiundefined

解决方案

您的 api 返回一个对象数组，因此如果您有 ProductList，则不应在 Product Details 中进行 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>

}

推荐阅读