我正在创建我的第一个网上商店，但遇到了问题。我制作了假 API，其中包含产品卡数据，当我使用 axios.get 获取它们并添加到状态时，我发现“props.addCardData 不是函数”。我必须说，一切工作正常，直到我添加 axios.get 。其他函数我使用与函数 addCardData 相同的方式：我的意思是，我使用了 mapDispatchToProps，我使用了 props.addCardData - 我没有在 axios.get 或其他请求中使用它们）。我之前使用任何功能都没有问题。

我计划通过 axios.get 获取数据，从卡片容器调用一个函数，该函数将调用以操作创建者作为参数的调度。

我还发现“无法读取未定义的属性（读取“addCardData”）。

下面，我已经指出了受问题影响的代码部分（我已经指出了哪些代码适用于哪些元素）

这是 Cards 组件中的代码（我没有在此处添加导入，但 ofc 我拥有所有导入）：

const Cards = (props) => {

  axios.get('https://mocki.io/v1/8cb0f160-92f7-4cf8-a6c1-f63690df514e')
    .then(response => {
      props.addCardData(response.data)
    })

  let cardsArray = Object.keys(props.cardsData).map(card => (
    <OfferCard
      key={card.id}
      bg={props.cardsData[card].bg}
      id={props.cardsData[card].tagId}
      title={props.cardsData[card].title}
      text={props.cardsData[card].text}
      button={
        <Container fluid>
          <Row className={'row-cols-auto'}>
            {props.cardsData[card].button.map(button => (
              <CardsButton
                key={button.id}
                link={button.link}
                type={button.type}
                class={button.class}
                name={button.name}
              />
            ))}
          </Row>
        </Container>
      }
    />
  ))

  return (
    <Container fluid>
      <img src={'./backgrounds/bestoffers.png'} alt={'BEST OFFERS'} className={'img-fluid imgTab'} />
      <Row xs={1} md={2} id={'cards-row'} className={'border border-4 g-3'}>
        {/*row-cols-* - set the cards width by setting amount of cards in row*/}
        {cardsArray}
      </Row>
    </Container>
  )
}

export default Cards

这是 CardsContainer 中的代码：

const mapStateToProps = (state) => {
  return {
    cardsData: state.homePage.cardsData
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    addCardData: (data) => {
      dispatch(addCardsData(data))
    }
  }
}

const CardsContainer = connect(mapStateToProps, mapDispatchToProps)(Cards);

export default CardsContainer

这是减速器中的代码：

...
homePageCardsData = 'HOMEPAGE-CARDS-DATA'

initialState = {...} - includes "cardsData: {}"

const homePageReducer = (state = initialState, action) => {
  let stateCopy;
  switch (action.type) {
    case homePageCardsData: {
      stateCopy = {...state, cardsData: action.data}
      break
    }
    ...
    default: return state;
  }
  return stateCopy;

  ...... - some functions here (not necessary to know)
}

export const addCardsData = (data) => ({
  type: homePageCardsData,
  data: data
})

当我尝试类似的事情时：

const addCard = props.addCardData

axios.get('https://mocki.io/v1/8cb0f160-92f7-4cf8-a6c1-f63690df514e')
  .then(response => {
    addCard(response.data)
  })

我在本地主机上出现延迟（在主页上！！），所有内容都开始缓慢渲染，并且 70% 的情况下，卡片块未渲染。在其他情况下，它可以在一段时间后渲染（很少机会）。在 AdminPanel 页面上，我渲染 Cards 因为我在测试菜单时需要查看更改，我收到“TypeError：addCard 不是函数。”

如果我从组件中删除此代码 - 一切都会正常。

我还必须说我使用了“调试器”并将其放在 homePageCardsData 中。脚本在调试器上停止（在 StateCopy 之后和 break 之前）。这意味着脚本是正确的，dispatch 可以工作，我可以进入案例 homePageCardsData。