React は props を報告します。「関数」は関数ではありません

Question

初めてのオンライン ストアを作成しているのですが、問題が発生しました。製品カード データを含む偽の API を作成し、axios.get を使用してそれらを取得し、状態に追加すると、「props.addCardData は関数ではありません」というメッセージが表示されます。axios.get を追加するまでは、すべて正常に動作すると言わざるを得ません。他の関数は、関数 addCardData と同じ方法で使用します。つまり、mapDispatchToProps を使用し、props.addCardData を使用しました。 - I axios.get やその他のリクエストでは使用しません)。以前はどの機能も問題なく使用できました。

axios.get 経由でデータを取得し、アクション クリエーターをパラメータとしてディスパッチを呼び出す関数をカード コンテナから呼び出す予定です。

「未定義のプロパティを読み取ることができません ('addCardData' を読み取ります)」も見つかりました。

以下に、問題の影響を受けるコード部分を示します (どのコードがどの要素に適用されるかを示します)

これは Cards コンポーネントのコードです (ここではインポートを追加しませんでしたが、インポートはすべてあります):

const Cards = (props) => {

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

  letcardArray = Object.keys(props.cardsData).map(card => (
    <オファーカード
      key={カード.id}
      bg={props.cardsData[カード].bg}
      id={props.cardsData[カード].tagId}
      title={props.cardsData[カード].title}
      text={props.cardsData[カード].text}
      ボタン={
        ＜容器液＞
          <行クラス名={'row-cols-auto'}>
            {props.cardsData[カード].button.map(button => (
              <カードボタン
                key={ボタン.id}
                リンク={ボタン.リンク}
                type={ボタン.タイプ}
                class={ボタン.クラス}
                名前={ボタン.名前}
              />
            ))}
          </行>
        </コンテナ>
      }
    />
  ))

  戻る （
    ＜容器液＞
      <img src={'./backgrounds/bestoffers.png'} alt={'ベストオファー'} className={'img-fluid imgTab'} />
      <Row xs={1} md={2} id={'cards-row'} className={'border border-4 g-3'}>
        {/*row-cols-* - 行内のカードの量を設定してカードの幅を設定します*/}
        {カード配列}
      </行>
    </コンテナ>
  ）
}

デフォルトのカードをエクスポート

これは CardsContainer のコードです:

<code>const mapStateToProps = (state) => {
  戻る {
    カードデータ: state.homePage.cardsData
  }
}

const mapDispatchToProps = (ディスパッチ) => {
  戻る {
    addCardData: (データ) => {
      ディスパッチ(addCardsData(データ))
    }
  }
}

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

デフォルトの CardsContainer をエクスポートする
</code>

これはリデューサー内のコードです:

<code>...
homePageCardsData = 'ホームページ-カード-データ'

InitialState = {...} - 「cardsData: {}」が含まれます。

const homePageReducer = (state =InitialState, action) => {
  stateCopy を実行します。
  スイッチ (アクション.タイプ) {
    ケース homePageCardsData: {
      stateCopy = {...状態、カードデータ: action.data}
      壊す
    }
    ...
    デフォルト: 状態を返します。
  }
  状態コピーを返します。

  ...... - ここにいくつかの機能があります (知る必要はありません)
}

エクスポート const addCardsData = (データ) => ({
  タイプ: homePageCardsData、
  データ: データ
})
</code>

次のようなことを試してみると:

<code>const addCard = props.addCardData

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

ローカルホスト (ホームページ上!!) で遅れが発生しており、すべてのレンダリングの開始が遅く、70% の確率でカード ブロックがレンダリングされません。他の場合には、しばらくしてからレンダリングされる可能性があります (まれな可能性)。メニューのテスト中に変更を確認する必要があるため、AdminPanel ページで Cards をレンダリングしていると、「TypeError: addCard is not a function.」というメッセージが表示されます。

このコードをコンポーネントから削除すると、すべて正常に動作します。

「デバッガー」を使用し、それを homePageCardsData に配置したことも言わなければなりません。スクリプトはデバッガー上で停止します (StateCopy の後、break の前)。これは、スクリプトが正しく、dispatch が機能し、homePageCardsData のケースに入ることができることを意味します。

Answer 1

問題は Cards コンポーネントにあり、コンポーネントの関数本体で直接、意図しない副作用として Axios GET リクエストが行われます。これにより、レンダリング ループが作成される可能性が高く、少なくとも Cards がレンダリングされるたびに GET リクエストが作成されます。

このコードを useEffect フックに移動して、コンポーネントのインストール後に呼び出されるようにします。

＃＃＃例：＃＃＃ リーリー

かなり古い Redux コードを使用していますが、

useDispatch

および useSelector フックがその使用法を置き換えたため、通常は connect 上位コンポーネントを使用しなくなりました。現在の標準は、Redux-Toolkit を使用することです。これにより、記述する必要があるボイラープレートの量が does 削減されます。 以下は更新提案の例です:

リーリー

reducer コード、オペレーション タイプ、オペレーション クリエーター... すべてが 1 つの状態スライスに置き換えられます。

リーリー