<p>첫 번째 온라인 상점을 만드는 중인데 문제가 생겼습니다. 제품 카드 데이터가 포함된 가짜 API를 만들었고 <code>axios.get</code>를 사용하여 이를 가져오고 상태에 추가하면 "props.addCardData는 함수가 아닙니다"라는 메시지가 표시됩니다.<code>axios.get</code> 을 추가하기 전까지는 모든 것이 잘 작동합니다. 다른 함수는 <code>addCardData</code> 함수와 같은 방식으로 사용됩니다. 즉, <code>mapDispatchToProps</code>를 사용했고 <code>props.addCardData</code>를 사용했습니다. <code>axios.get</code> 또는 기타 요청에서는 사용하지 않습니다. 이전에는 모든 기능을 사용하는 데 아무런 문제가 없었습니다. </p> <p><code>axios.get</code>를 통해 데이터를 가져오고 액션 생성자를 매개변수로 사용하여 디스패치를 ​​호출하는 카드 컨테이너에서 함수를 호출할 계획입니다. </p> <p>또한 "정의되지 않은 속성을 읽을 수 없습니다('addCardData' 읽기).</p> <p>아래에는 문제의 영향을 받은 코드 부분을 표시했습니다(어떤 코드가 어떤 요소에 적용되는지 표시했습니다)</p> <p>이것은 카드 구성요소의 코드입니다(여기에 가져오기를 추가하지 않았지만 대부분 가져오기가 모두 있습니다). </p> <pre class="brush:php;toolbar:false;">const 카드 = (props) => axios.get('https://mocki.io/v1/8cb0f160-92f7-4cf8-a6c1-f63690df514e') .then(응답 => { props.addCardData(응답.데이터) }) 카드Array = Object.keys(props.cardsData).map(카드 => ( <오퍼카드 키={카드.id} bg={props.cardsData[카드].bg} id={props.cardsData[카드].tagId} title={props.cardsData[카드].title} 텍스트={props.cardsData[카드].text} 버튼={ <용기액> <행 클래스 이름={'row-cols-auto'}> {props.cardsData[카드].button.map(버튼 => ( <카드버튼 키={button.id} 링크={button.link} 유형={button.type} 클래스={button.class} 이름={버튼.이름} /> ))} </행> </컨테이너> } /> )) 반품 ( <용기액> <img src={'./Backgrounds/bestoffers.png'} alt={'최고의 제안'} className={'img-fluid imgTab'} /> <행 xs={1} md={2} id={'cards-row'} className={'border border-4 g-3'}> {/*row-cols-* - 행의 카드 양을 설정하여 카드 너비를 설정합니다*/} {cardsArray} </행> </컨테이너> ) } 기본 카드 내보내기</pre> <p>이것은 <code>CardsContainer</code>에 있는 코드입니다: </p> <pre class="lang-js Prettyprint-override"><code>const mapStateToProps = (state) => 반품 { 카드데이터: state.homePage.cardsData } } const mapDispatchToProps = (디스패치) => 반품 { addCardData: (데이터) => 파견(addCardsData(데이터)) } } } const CardsContainer = connect(mapStateToProps, mapDispatchToProps)(카드); 기본 CardsContainer 내보내기 <p>리듀서의 코드는 다음과 같습니다. </p> <pre class="lang-js Prettyprint-override"><code>... homePageCardsData = '홈페이지-카드-데이터' initialState = {...} - "cardsData: {}"를 포함합니다. const homePageReducer = (상태 = 초기 상태, 동작) => 상태복사를 하자; 스위치(action.type) { 사례 homePageCardsData: { stateCopy = {...상태, 카드 데이터: action.data} 부서지다 } ... 기본값: 상태를 반환합니다. } 상태를 반환복사; ...... - 여기에 몇 가지 기능이 있습니다(알 필요는 없음) }const addCardsData = (데이터) => 유형: homePageCardsData, 데이터: 데이터 }) <p>다음과 같은 것을 시도할 때:</p> <pre class="lang-js Prettyprint-override"><code>const addCard = props.addCardData axios.get('https://mocki.io/v1/8cb0f160-92f7-4cf8-a6c1-f63690df514e') .then(응답 => { addCard(응답.데이터) }) <p>localhost(홈 페이지!!)에서 지연이 발생하고 모든 것이 느리게 렌더링되기 시작하며 70%의 시간 동안 카드 블록이 렌더링되지 않습니다. 다른 경우에는 일정 시간이 지나면 렌더링될 수 있습니다(드물게 발생함). 메뉴를 테스트하는 동안 변경 사항을 확인해야 하기 때문에 AdminPanel 페이지에서 <code>Cards</code>를 렌더링하고 있는데 "TypeError: addCard는 함수가 아닙니다."라는 메시지가 나타납니다. <p>구성요소에서 이 코드를 제거하면 모든 것이 잘 작동합니다. </p> <p>또한 "디버거"를 사용하여 <code>homePageCardsData</code>에 배치했다고 말씀드리고 싶습니다. 스크립트는 디버거에서 중지됩니다(<code>StateCopy</code> 뒤 및 <code>break</code> 이전). 이는 스크립트가 정확하고 <code>dispatch</code>가 작동하며 <code>homePageCardsData</code> 케이스에 들어갈 수 있음을 의미합니다. </p>