<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>这是 Cards 组件中的代码（我没有在此处添加导入，但 ofc 我拥有所有导入）：</p> <pre class="brush:php;toolbar:false;">const Cards = (props) =&gt; { axios.get('https://mocki.io/v1/8cb0f160-92f7-4cf8-a6c1-f63690df514e') .then(response =&gt; { props.addCardData(response.data) }) let cardsArray = Object.keys(props.cardsData).map(card =&gt; ( &lt;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={ &lt;Container fluid&gt; &lt;Row className={'row-cols-auto'}&gt; {props.cardsData[card].button.map(button =&gt; ( &lt;CardsButton key={button.id} link={button.link} type={button.type} class={button.class} name={button.name} /&gt; ))} &lt;/Row&gt; &lt;/Container&gt; } /&gt; )) return ( &lt;Container fluid&gt; &lt;img src={'./backgrounds/bestoffers.png'} alt={'BEST OFFERS'} className={'img-fluid imgTab'} /&gt; &lt;Row xs={1} md={2} id={'cards-row'} className={'border border-4 g-3'}&gt; {/*row-cols-* - set the cards width by setting amount of cards in row*/} {cardsArray} &lt;/Row&gt; &lt;/Container&gt; ) } export default Cards</pre> <p>这是 <code>CardsContainer</code> 中的代码：</p> <pre class="lang-js prettyprint-override"><code>const mapStateToProps = (state) =&gt; { return { cardsData: state.homePage.cardsData } } const mapDispatchToProps = (dispatch) =&gt; { return { addCardData: (data) =&gt; { dispatch(addCardsData(data)) } } } const CardsContainer = connect(mapStateToProps, mapDispatchToProps)(Cards); export default CardsContainer </code></pre> <p>这是减速器中的代码：</p> <pre class="lang-js prettyprint-override"><code>... homePageCardsData = 'HOMEPAGE-CARDS-DATA' initialState = {...} - includes &quot;cardsData: {}&quot; const homePageReducer = (state = initialState, action) =&gt; { 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) =&gt; ({ type: homePageCardsData, data: data }) </code></pre> <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(response =&gt; { addCard(response.data) }) </code></pre> <p>我在本地主机上出现延迟（在主页上！！），所有内容都开始缓慢渲染，并且 70% 的情况下，卡片块未渲染。在其他情况下，它可以在一段时间后渲染（很少机会）。在 AdminPanel 页面上，我渲染 <code>Cards</code> 因为我在测试菜单时需要查看更改，我收到“TypeError：addCard 不是函数。”</p> <p>如果我从组件中删除此代码 - 一切都会正常。</p> <p>我还必须说我使用了“调试器”并将其放在 <code>homePageCardsData</code> 中。脚本在调试器上停止（在 <code>StateCopy</code> 之后和 <code>break</code> 之前）。这意味着脚本是正确的，<code>dispatch</code> 可以工作，我可以进入案例 <code>homePageCardsData</code>。</p>

const Cards = ({ addCardsData, cardsData }) => {
  useEffect(() => {
    axios
      .get("https://mocki.io/v1/8cb0f160-92f7-4cf8-a6c1-f63690df514e")
      .then((response) => {
        addCardsData(response.data);
      });
  }, [addCardsData]);

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

  return (
    ...
  );
};

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

const mapDispatchToProps = {
  addCardsData
};

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

import { useDispatch, useSelector } from "react-redux";
...

const Cards = () => {
  const dispatch = useDispatch();
  const cardsData = useSelector(state => state.homePage.cardsData);

  useEffect(() => {
    axios
      .get("https://mocki.io/v1/8cb0f160-92f7-4cf8-a6c1-f63690df514e")
      .then((response) => {
        dispatch(addCardsData(response.data));
      });
  }, [dispatch]);

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

  return (
    ...
  );
};

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  cardsData: {},
  ... other home page state ...
};

const homePageSlice = createSlice({
  name: "homePage",
  initialState,
  reducers: {
    addCardsData: (state, action) => {
      state.cardsData = action.payload;
    },
    ... other reducer cases ...
  }
});

export const {
  addCardsData,
  ... other generated actions ...
} = homePageSlice.actions;

export default homePageSlice.reducer;