TypeError: 정의되지 않은 'map' 속성을 읽을 수 없습니다.

안녕하세요, 저는 React js를 처음 접했습니다. redux와 함께 react js를 사용하여 프로젝트를 만들고 있습니다. action.js 파일에서 휴식 호출을 누르면 리듀서가 저장소 상태를 업데이트합니다. itemDetailsPage.js 구성 요소에서 저장소 값을 사용하고 제대로 작동하지만 map() 메서드를 사용하여 저장소 상태에 있는 itemImages 배열의 각 이미지를 렌더링하면 "'map' 속성을 읽을 수 없습니다. 정의되지 않은". itemImages는 배열입니다. 다른 구성 요소에서 이 배열을 반복하면 제대로 작동하지만 이 구성 요소에서는 오류가 표시됩니다.

이것은 내 작업 코드입니다.

내보내기 const getItem = (id) => 비동기 디스패치 => {
노력하다{
const res = await axios.get( http://localhost:8086/api/item/getItem/${id} );
console.log( success message ${res.data} )
보내다({
유형: GET_ITEM,
페이로드: res.data.data
});
}잡기(오류){
console.log( error message ${error} )
}
};

이것은 내 감속기 코드입니다.

import { act } from 'react-dom/test-utils';
import { GET_ITEM, GET_ITEMS } from './../actions/Type';
const 초기 상태={
항목:[],
안건:{}

};
기본 기능 내보내기(state=initialState,action){
스위치(액션.유형){
케이스 GET_ITEMS:
반품{
...상태,
항목:action.payload
}
케이스 GET_ITEM:
반품{
...상태,
항목:action.payload
}
기본:
반환 상태;
}
}

이것은 내 ItemDetailsPage.js입니다(정확히 오류가 발생한 위치).

'react'에서 React, { 구성 요소 } 가져오기
import { connect } from 'react-redux';

import { Link } from 'react-router-dom';
import { successAlert } from '../layout/SweetAlert';
import { getItem } from './../../actions/ItemActions';
클래스 ItemDetailsPage 확장 구성 요소 {
생성자(소품){
슈퍼(소품);
this.onAddToCartClick=this.onAddToCartClick.bind(이)
}
onAddToCartClick(){
successAlert("장바구니","장바구니에 상품이 성공적으로 추가되었습니다.");
}
componentDidMount(){
const { id } = this.props.match.params;
this.props.getItem(id);
}
렌더() {
const item=this.props.item
반품 (

          <div className="row">
            <div className="col-md-6 mb-4 mb-md-0">

              <div id="mdb-lightbox-ui"></div>

              <div className="mdb-lightbox">

                <div className="row product-gallery mx-1">

                  <div className="col-18 mb-0">


                    <div class="container my-4">
                    <div id="carouselExample1" class="carousel slide z-depth-1-half" data-ride="carousel">
                          <div class="carousel-inner">
                            <div class="carousel-item active">
                              <img height="500px" class="d-block w-100 " src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12a.jpg" alt="First slide"/>
                            </div>
                            <div class="carousel-item">
                              <img height="500px" class="d-block w-100 " src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13a.jpg" alt="Second slide"/>
                            </div>
                            <div class="carousel-item">
                              <img height="500px" class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14a.jpg" alt="Third slide"/>
                            </div>
                          </div>
                          <a class="carousel-control-prev" href="#carouselExample1" role="button" data-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                          </a>
                          <a class="carousel-control-next" href="#carouselExample1" role="button" data-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                          </a>
                        </div>


                      </div>



                  </div>
                  <div className="col-12">
                    <div className="row">
          {item.itemImages.map(itemImage=>(
                       console.log("inside itemimages array")

))}




className="img-fluid"/>






className="img-fluid"/>






className="img-fluid"/>






className="img-fluid"/>

                    </div>
                  </div>
                </div>

              </div>

            </div>
            <div className="col-md-6">

              <h5>{item.name}</h5>
              <p className="mb-2 text-muted text-uppercase small">{item.subCategory}</p>
              <ul className="rating">

                  <i className="fas fa-star fa-sm text-primary"></i>


                  <i className="fas fa-star fa-sm text-primary"></i>


                  <i className="fas fa-star fa-sm text-primary"></i>


                  <i className="fas fa-star fa-sm text-primary"></i>


                  <i className="far fa-star fa-sm text-primary"></i>

              </ul>
              <p><span className="mr-1"><strong>₹ {item.price}</strong></span></p>
              <p className="pt-1">{item.description} Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit
                error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam. Distinctio,
                officia quis dolore quos sapiente tempore alias.</p>
              <div className="table-responsive">
                <table className="table table-sm table-borderless mb-0">
                  <tbody>
                    <tr>
                      <th className="pl-0 w-25" scope="row"><strong>Color</strong></th>
                      <td>Red </td>
                    </tr>
                    <tr>
                      <th className="pl-0 w-25" scope="row"><strong>Category</strong></th>
                      <td>{item.category}</td>
                    </tr>
                    <tr>
                      <th className="pl-0 w-25" scope="row"><strong>Sub-Category</strong></th>
                      <td>{item.subCategory}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <hr/>
              <div className="table-responsive mb-2">
                <table className="table table-sm table-borderless">
                  <tbody>
                    <tr>
                      <td className="pl-0 pb-0 w-25">Quantity</td>
                    </tr>
                    <tr>
                      <td className="pl-0">
                      {/*
                        <div className="def-number-input number-input safari_only mb-0">
                          <button onclick="this.parentNode.querySelector('input[type=number]').stepDown()"
                            className="minus"></button>
                          <input className="quantity" min="0" name="quantity" value="1" type="number"/>
                          <button onclick="this.parentNode.querySelector('input[type=number]').stepUp()"
                            className="plus"></button>
                      </div>*/}
                      </td>
                      Y</tr>
                  </tbody>
                </table>
              </div>
              <button type="button" className="btn btn-primary btn-md mr-1 mb-2">Buy now</button>
              <button type="button" className="btn btn-light btn-md mr-1 mb-2" onClick={this.onAddToCartClick}><i
                  className="fas fa-shopping-cart pr-2"></i>Add to cart</button>
            </div>
          </div>

        </section>
        </div>
    )
}

}
const mapStateToProps=상태=>({
항목:state.itemReducer.item
})
export default connect(mapStateToProps,{getItem})(ItemDetailsPage);