React中使用axios.get调用props.addCardData时出现函数未定义报错

问题现象 #

• 调用props.addCardData时触发报错：props.addCardData is not a function、Cannot read properties of undefined (reading 'addCardData')
• 将props.addCardData赋值给变量后调用，主页出现严重卡顿，卡片区块70%概率无法渲染；在AdminPanel页面渲染Cards组件时，触发TypeError: addCard is not a function
• 删除axios相关代码后所有功能恢复正常，但debugger显示reducer能进入homePageCardsData对应的case

核心问题分析 #

1. 组件使用错误：如果在AdminPanel等页面直接渲染的是Cards基础组件而非CardsContainer容器组件，props中不会有addCardData方法——该方法是通过connect映射到容器组件的，基础组件无此属性。
2. 无限循环请求：axios请求直接写在组件函数体内，组件每次渲染都会发起请求，请求成功后更新Redux状态又触发组件重新渲染，形成无限循环，这是卡顿的根源。
3. 数据遍历逻辑错误：使用Object.keys(props.cardsData).map时，card是对象的键名而非卡片对象，导致key={card.id}取到undefined，可能引发渲染异常。

解决方案 #

1. 统一渲染容器组件 #

所有需要使用Redux映射方法的页面，必须导入并渲染CardsContainer，而非Cards基础组件。

2. 用useEffect限制请求执行时机 #

将axios请求放入useEffect钩子，设置空依赖数组确保仅在组件挂载时执行一次：

import { useEffect } from 'react';

const Cards = (props) => {
  useEffect(() => {
    axios.get('https://mocki.io/v1/8cb0f160-92f7-4cf8-a6c1-f63690df514e')
      .then(response => {
        props.addCardData(response.data);
      })
      .catch(err => {
        console.error('卡片数据获取失败:', err);
      });
  }, []); // 空依赖数组避免无限循环

  // 剩余渲染代码
}

3. 修正数据遍历逻辑 #

将Object.keys改为Object.values，直接遍历卡片对象数组：

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

验证要点 #

• 检查所有使用Cards的页面，确认导入的是CardsContainer
• 查看浏览器网络请求，确认仅发起一次axios请求
• 确认Redux状态更新后，卡片能正常渲染

内容的提问来源于stack exchange，提问作者KvartalMan