Maison > Questions et réponses > le corps du texte
P粉8074716042023-09-05 09:01:34
Le problème est Cards
组件中,它直接在组件的函数体中将 Axios GET 请求作为无意的副作用。这很可能会创建一个渲染循环,或者至少在每次 Cards
de faire une requête GET lors du rendu.
Déplacez ce code dans un hook useEffect
afin qu'il soit appelé une fois le composant installé.
Exemple :
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);
Vous utilisez du code Redux assez ancien que nous n'utilisons généralement plus connect
高阶组件,因为 useDispatch
和 useSelector
挂钩取代了它的用法。目前的标准是使用 Redux-Toolkit
, ce qui réduit la quantité de passe-partout que vous devez écrire.
Voici des exemples de suggestions de mise à jour :
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 ( ... ); };
code du réducteur, type d'opération, créateur d'opération... le tout remplacé par une seule tranche d'état.
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;