onClick charge chaque instance à l'aide d'une carte

Question

Tiré sur toutes les instances de

loading 正在被设置并传递到 props 中，但是当在任何按钮上按下 onClick 时，加载程序会在 item. Comment puis-je faire fonctionner le chargeur uniquement sur les boutons enfoncés ?

List.map((item, i) => {
  return(
<Button onClick={(e) => !props.loading && e.stopPropagation()}>
  Save {props.loading && (<CircularProgress/>)}
</Button>
  );
});

Answer 1

Vous devez utiliser le tableau Id pour effectuer le chargement dans chaque bouton au lieu de charger la variable booléenne dans le composant parent. Voici un exemple: Vous pouvez vérifier ce code dans le bac à sable de code ici.

import "./styles.css";
import CircularProgress from "@mui/material/CircularProgress";
import { useState } from "react";

const items = ["1", "2", "3", "4", "5", "6"];

export default function App() {
  const [loading, setLoading] = useState([]);

  return (
    

      {items.map((item) => (
         {
            setLoading([...loading, e.target.id]);
          }}
        >
          {loading.includes(item) ?  : item}
        
      ))}
    
  );
}

Ceci est un exemple simple de ma mise en œuvre. Si l'utilisateur clique sur un bouton, seul ce bouton affichera la flèche de chargement. Vous pouvez y parvenir de plusieurs manières. Vous pouvez également ajouter une logique pour supprimer la charge si l'utilisateur clique sur le bouton de chargement en vérifiant si l'élément existe dans l'état. Si tel est le cas, vous pouvez simplement le supprimer de la liste de chargement.