0
votes

ReactJS: le composant ne se rend pas en cas de changement d'état

J'essaie de mettre à jour l'état lors d'un événement de clic à l'aide des hooks de réaction. L'état change, mais le composant ne se rend pas. Voici mon extrait de code:

function ThirdPage() {
const [selectedIngredients, setSelectedIngredients] = useState([])

const DeleteIngredient = (ingredient) => {
    let selectedIngredientsContainer = selectedIngredients;
    selectedIngredientsContainer.splice(selectedIngredientsContainer.indexOf(ingredient), 1);
    setSelectedIngredients(selectedIngredientsContainer);
    console.log(selectedIngredients);
}


const selectedIngredientsDiv = selectedIngredients.map(ingredient =>
    (
    <div className={styles.selectedIngredientsDiv}>{ingredient}
                                                    <div className={styles.DeleteIngredient}
                                                        onClick={() => {
                                                        DeleteIngredient(ingredient)}}>x</div></div>
    ))

return (
...

Qu'est-ce que je fais mal? Merci d'avance!

javascript reactjs

2 commentaires

votre tableau d'état sélectionné Ingrédients est vide, donc je suppose qu'il n'y a pas de changement d'état, dans l'épissure ne fait aucun effet, donc pas de rendu

Quel est le composant return il y a probablement un problème là-bas

3 Réponses :

0
votes

Normalement, je laisserais une explication sur ce qui se passe mais tldr est que vous devriez d'abord vérifier que votre tableau n'est pas vide, puis vous pouvez filtrer les ingrédients courants. De plus, vous n'avez pas besoin de crochets pour appeler cette fonction dans le jsx, mais cela peut être une saveur personnelle pour le code personnel. Je m'excuse si cela n'aide pas mais je dois aller travailler. Bonne chance!

function ThirdPage() {
  const [selectedIngredients, setSelectedIngredients] = useState([]);

  const DeleteIngredient = ingredient => {
    // let selectedIngredientsContainer = selectedIngredients;
    // selectedIngredientsContainer.splice(selectedIngredientsContainer.indexOf(ingredient), 1);
    // setSelectedIngredients(selectedIngredientsContainer);
    // console.log(selectedIngredients);
    if (selectedIngredients.length > 0) {
      // this assumes that there is an id property but you could compare whatever you want in the Array.filter() methods
      const filteredIngredients = setSelectedIngredients.filter(selectedIngredient => selectedIngredient.id !== ingredient.id);
      setSelectedIngredients(filteredIngredients);
    }
    // nothing in ingredients - default logic so whatever you want
    // log something for your sanity so you know the array is empty
    return;
  };

  const selectedIngredientsDiv = selectedIngredients.map(ingredient => (
    <div className={styles.selectedIngredientsDiv}>
      {ingredient}
      <div className={styles.DeleteIngredient} onClick={() => DeleteIngredient(ingredient)}>
        x
      </div>
    </div>
  ));
}

0 commentaires

2
votes

Problème avec votre épissure car elle n'est pas enregistrée dans selectedIngredientsContainer. Je ferais ce qui suit:

selectedIngredientsContainer.splice(selectedIngredientsContainer.indexOf(ingredient), 1 );
setSelectedIngredients([...selectedIngredientsContainer]);

selectedIngredientsContainer = selectedIngredientsContainer.filter(value => value !== ingredient);

J'espère que cela aide.

0 commentaires

0
votes

La réponse est très simple, votre tableau d'état selectedIngredients est initialisé avec un tableau vide, donc lorsque vous appelez map sur le tableau vide, il ne s'exécutera même pas une fois et donc DeleteIngredient n'est jamais appelé et votre état ne change pas, donc aucun rendu ne se produit

0 commentaires