0
votes

Comment refaire le rendu après le changement d'état dans React js?

import React from 'react'

export default function App(){
    const[flag,setFlag] =React.useState({1:false,2:false})

    const change=(id)=>{
        flag[id] = !flag[id]
        setFlag(flag)
        console.log(flag)
    }

    return(
        <div>
            {flag[1] ? <p>this is true</p> : <p>this is false</p>}
            <button onClick={()=>change(1)}>Change</button>
        </div>
    )
}
I want to change my output based on flag state. While flag JSON is changing, but it's not re-rendering.

javascript reactjs json rendering

1 commentaires

après avoir changé le drapeau, j'utilise setFlag (drapeau). Pouvez-vous expliquer votre réponse?

3 Réponses :

0
votes

votre code fonctionne correctement.

const change=(id)=>{
   console.log(flag[id]);
        flag[id] = !flag[id]
        setFlag(flag)
        console.log(flag)
    }

Pourriez-vous vérifier la méthode de rendu.

Vérifiez ici https://codepen.io/palash924332931/pen/VwYpwOq?editors=1111

3 commentaires

en définissant setFlag ({flag: flag}), il créera json dans un json. Dans le composant fonctionnel, nous ne devrions pas définirState comme ça.

Pourriez-vous vérifier la méthode de rendu? J'ai vu que cela fonctionne correctement.

Le code est partagé dans l'url donnée.

0
votes

Vous devriez utiliser setFlag () pour changer l'état au lieu de changer directement flag . En utilisant le setter pour l'état flag , vous pouvez appeler render () si vous utilisez setFlag () . Pour utiliser setFlag () avec votre configuration actuelle, vous pouvez utiliser noms de propriétés calculés comme suit:

const change = id => {
  setFlag(currentFlag => ({[id]: !currentFlag}));
}

0 commentaires

0
votes

Le programme de mise à jour d'état renvoyé par useState ne rendra pas les enfants du composant si vous définissez une nouvelle valeur égale à la valeur actuelle. https://reactjs.org/docs/ hooks-reference.html # bailing-out-of-a-state-update

    function App() {
  const [flag, setFlag] = React.useState({ 1: false, 2: false });

  const change = id => {
    var newFlag = Object.assign({}, flag);
    newFlag[id] = !flag[id];
    setFlag(newFlag);
  };
  return (
    <div>
      {flag[1] ? (
        <p>this is true</p>
      ) : (
        <p>this is false</p>
      )}
      <button onClick={() => change(1)}>Change</button>
    </div>
  );
}

exemple codepen

0 commentaires