类型错误：无法读取 reactjs 中未定义的属性“map”

Question

我正在使用 React.js。我想在电子商务网站的产品详细信息中使用我在 Mock Api 中捕获的数据，但出现以下错误。我的目标是从 ProductDetail 中的 Mock API 中提取和打印数据。 ProductDetail.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>
        );

错误输出：

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?