React rapporte les accessoires. "fonction" n'est pas une fonction-Questions et réponses sur le réseau chinois PHP

Je crée ma première boutique en ligne et je rencontre un problème. J'ai créé une fausse API qui contient des données de fiche produit et lorsque je les reçois en utilisant axios.get et que j'ajoute à l'état, j'obtiens "props.addCardData n'est pas une fonction".Je dois dire que tout fonctionne bien jusqu'à ce que j'ajoute axios.get Autres fonctions que j'utilise de la même manière que la fonction addCardData : je veux dire, j'ai utilisé mapDispatchToProps je ne les utilise pas dans axios.get ou dans d'autres requêtes). Je n’ai eu aucun problème à utiliser aucune des fonctionnalités auparavant.

Je prévois d'obtenir les données via axios.get et d'appeler une fonction à partir du conteneur de cartes qui appellera la répartition avec le créateur d'action comme paramètre.

J'ai également trouvé "Impossible de lire la propriété non définie (lire 'addCardData').

Ci-dessous, j'ai indiqué la partie du code affectée par le problème (j'ai indiqué quel code s'applique à quels éléments)

Voici le code du composant Cartes (je n'ai pas ajouté les importations ici, mais bien sûr j'ai toutes les importations) :

const Cartes = (accessoires) => axios.get('https://mocki.io/v1/8cb0f160-92f7-4cf8-a6c1-f63690df514e') .then(réponse => { props.addCardData(response.data) }) laissez cardsArray = Object.keys(props.cardsData).map(card => (   {props.cardsData[card].button.map(bouton => (  ))}   } /> )) retour (    {/*row-cols-* – définit la largeur des cartes en définissant le nombre de cartes dans la ligne*/} {cartesArray}   ) } exporter les cartes par défaut

Voici le code dans CardsContainer :

const mapStateToProps = (state) => retour { CardsData : state.homePage.cardsData } } const mapDispatchToProps = (envoi) => retour { addCardData : (données) => expédition (addCardsData (données)) } } } const CardsContainer = connect(mapStateToProps, mapDispatchToProps)(Cartes); exporter le conteneur de cartes par défaut

Voici le code dans le réducteur :

... homePageCardsData = 'HOMEPAGE-CARDS-DATA' initialState = {...} - inclut "cardsData : {}" const homePageReducer = (état = état initial, action) => laissez stateCopy ; commutateur (action.type) { cas homePageCardsData : { stateCopy = {...état, cardsData : action.data} casser } ... par défaut : état de retour ; } retourner l'étatCopie ; ...... - quelques fonctions ici (pas besoin de savoir) }exporter const addCardsData = (données) => tapez : accueilPageCardsData, données : données })

Quand j'essaie quelque chose comme :

const addCard = props.addCardData axios.get('https://mocki.io/v1/8cb0f160-92f7-4cf8-a6c1-f63690df514e') .then(réponse => { addCard (réponse.données) })

J'ai du retard sur localhost (sur la page d'accueil !!), tout commence à s'afficher lentement, et 70 % du temps, le blocage de la carte ne s'effectue pas. Dans d'autres cas, le rendu peut s'effectuer après un certain temps (rare chance). Sur la page AdminPanel, j'affiche Cards car j'ai besoin de voir les modifications lors du test du menu, j'obtiens "TypeError : addCard n'est pas une fonction".

Si je supprime ce code du composant, tout fonctionne correctement.

Je dois aussi dire que j'ai utilisé le "débogueur" et que je l'ai placé dans homePageCardsData. Le script s'arrête sur le débogueur (après StateCopy et avant break). Cela signifie que le script est correct, dispatch fonctionne et que je peux entrer dans le cas homePageCardsData.

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) => ( {cardsData[card].button.map((button) => ( ))} } /> )); 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;

répondre à tous (1)

P粉8074716042023-09-05 09:01:34 1 plancher

Le problème estCards组件中，它直接在组件的函数体中将 Axios GET 请求作为无意的副作用。这很可能会创建一个渲染循环，或者至少在每次Cardsde faire une requête GET lors du rendu.

Déplacez ce code dans un hookuseEffectafin qu'il soit appelé une fois le composant installé.

Exemple :

Vous utilisez du code Redux assez ancien que nous n'utilisons généralement plusconnect高阶组件，因为useDispatch和useSelector挂钩取代了它的用法。目前的标准是使用Redux-Toolkit, ce quiréduitla quantité de passe-partout que vous devez écrire.

Voici des exemples de suggestions de mise à jour :

code du réducteur, type d'opération, créateur d'opération... le tout remplacé par une seule tranche d'état.