React 보고서 소품입니다. "함수"는 함수가 아닙니다.

Question

첫 번째 온라인 상점을 만드는 중인데 문제가 생겼습니다. 제품 카드 데이터가 포함된 가짜 API를 만들었고 axios.get를 사용하여 이를 가져오고 상태에 추가하면 "props.addCardData는 함수가 아닙니다"라는 메시지가 표시됩니다.axios.get 을 추가하기 전까지는 모든 것이 잘 작동합니다. 다른 함수는 addCardData 함수와 같은 방식으로 사용됩니다. 즉, mapDispatchToProps를 사용했고 props.addCardData를 사용했습니다. axios.get 또는 기타 요청에서는 사용하지 않습니다. 이전에는 모든 기능을 사용하는 데 아무런 문제가 없었습니다.

axios.get를 통해 데이터를 가져오고 액션 생성자를 매개변수로 사용하여 디스패치를 ​​호출하는 카드 컨테이너에서 함수를 호출할 계획입니다.

또한 "정의되지 않은 속성을 읽을 수 없습니다('addCardData' 읽기).

아래에는 문제의 영향을 받은 코드 부분을 표시했습니다(어떤 코드가 어떤 요소에 적용되는지 표시했습니다)

이것은 카드 구성요소의 코드입니다(여기에 가져오기를 추가하지 않았지만 대부분 가져오기가 모두 있습니다).

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}
      </행>
    </컨테이너>
  )
}

기본 카드 내보내기

이것은 CardsContainer에 있는 코드입니다:

const mapStateToProps = (state) =>
  반품 {
    카드데이터: state.homePage.cardsData
  }
}

const mapDispatchToProps = (디스패치) =>
  반품 {
    addCardData: (데이터) =>
      파견(addCardsData(데이터))
    }
  }
}

const CardsContainer = connect(mapStateToProps, mapDispatchToProps)(카드);

기본 CardsContainer 내보내기

리듀서의 코드는 다음과 같습니다. 
...
homePageCardsData = '홈페이지-카드-데이터'

initialState = {...} - "cardsData: {}"를 포함합니다.

const homePageReducer = (상태 = 초기 상태, 동작) =>
  상태복사를 하자;
  스위치(action.type) {
    사례 homePageCardsData: {
      stateCopy = {...상태, 카드 데이터: action.data}
      부서지다
    }
    ...
    기본값: 상태를 반환합니다.
  }
  상태를 반환복사;

  ...... - 여기에 몇 가지 기능이 있습니다(알 필요는 없음)
}const addCardsData = (데이터) =>
  유형: homePageCardsData,
  데이터: 데이터
})

다음과 같은 것을 시도할 때:
const addCard = props.addCardData

axios.get('https://mocki.io/v1/8cb0f160-92f7-4cf8-a6c1-f63690df514e')
  .then(응답 => {
    addCard(응답.데이터)
  })

localhost(홈 페이지!!)에서 지연이 발생하고 모든 것이 느리게 렌더링되기 시작하며 70%의 시간 동안 카드 블록이 렌더링되지 않습니다. 다른 경우에는 일정 시간이 지나면 렌더링될 수 있습니다(드물게 발생함). 메뉴를 테스트하는 동안 변경 사항을 확인해야 하기 때문에 AdminPanel 페이지에서 Cards를 렌더링하고 있는데 "TypeError: addCard는 함수가 아닙니다."라는 메시지가 나타납니다.
구성요소에서 이 코드를 제거하면 모든 것이 잘 작동합니다. 
또한 "디버거"를 사용하여 homePageCardsData에 배치했다고 말씀드리고 싶습니다. 스크립트는 디버거에서 중지됩니다(StateCopy 뒤 및 break 이전). 이는 스크립트가 정확하고 dispatch가 작동하며 homePageCardsData 케이스에 들어갈 수 있음을 의미합니다. 

Answer 1

문제는 Cards 组件中，它直接在组件的函数体中将 Axios GET 请求作为无意的副作用。这很可能会创建一个渲染循环，或者至少在每次 Cards 렌더링 중에 GET 요청을 한다는 것입니다.

구성요소가 설치된 후 호출되도록 이 코드를 useEffect 후크로 이동하세요.

예:

으아악

당신은 일반적으로 더 이상 사용하지 않는 꽤 오래된 Redux 코드를 사용하고 있습니다 connect 高阶组件，因为 useDispatch 和 useSelector 挂钩取代了它的用法。目前的标准是使用 Redux-Toolkit. 이는 기능을 작성해야 하는 상용구의 양을 줄여줍니다.

업데이트 제안의 예는 다음과 같습니다.

으아악

리듀서 코드, 작업 유형, 작업 생성자 등 모두 단일 상태 슬라이스로 대체됩니다.

으아악