TypeError:Cannot read property 'map' of undefined in reactjs

末鹿安然 提交于 2021-02-19 06:16:27

问题


I'm using React.js. I want to use the data I have captured in Mock Api in product detail in an e-commerce site, but I get the following error. My goal here is to extract and print data from Mock API in ProductDetail. ProducDetail.js;

const ProductDetail = (props) => {
    
    const { name, description, price } = props;
    const axios = require('axios');
    const [dress, setDress] = useState([]);
    useEffect(() => {
        axios
            .get(`{url}`)
            .then(function (response) {
                setDress(response.data.dress);
            })
            .catch(function (error) {
                console.log(error);
            });
    }, []);
    const data = dress.map(item => {
        return {    
            name: item.name,
            description: item.description,
            price:item.price        
        }
    })
        return (
            <div>
                <ProductDetailButton onClick={toggle}>{buttonLabel}</ProductDetailButton>
                <Modal isOpen={modal} toggle={toggle} className={className}>
                    <ModalHeader toggle={toggle}>{name}</ModalHeader>
                    <ModalBody>
                        {description}
                        {price}
                    </ModalBody>
                    <ModalFooter>
                        <Button color="secondary" onClick={toggle}>
                            Kapat
                        </Button>
                    </ModalFooter>
                </Modal>
            </div>
        );

The error output:

Cannot read property 'map' of undefined
  34 |       }
  35 |   })
  36 | return (
> 37 |  <div>
     | ^  38 |      <ProductDetailButton onClick={toggle}>{buttonLabel}</ProductDetailButton>
  39 |      <Modal isOpen={modal} toggle={toggle} className={className}>
  40 |          <ModalHeader toggle={toggle}>{name}</ModalHeader>
How to fix this?

来源:https://stackoverflow.com/questions/65376562/typeerrorcannot-read-property-map-of-undefined-in-reactjs

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!