<p>Je lisais la documentation sur les mises à jour de la fonction React Hook et j'ai vu cette phrase : </p> <blockquote> <p>Les boutons "+" et "-" utilisent une forme fonctionnelle car la valeur mise à jour est basée sur la valeur précédente</p> </blockquote> <p>Mais je ne vois pas quel est le but des mises à jour de fonctions, ni la différence entre elles et l'utilisation directe de l'ancien état lors du calcul du nouvel état. </p> <p><strong>Pourquoi la fonction de mise à jour de React useState Hook nécessite-t-elle un formulaire de mise à jour de fonction ? </strong> <strong>Quels sont quelques exemples où la différence est clairement visible (et donc l'utilisation de la mise à jour directe entraînerait une erreur) ? </strong></p> <p>Par exemple, si je modifie l'exemple dans la documentation en : </p> <pre class="brush:php;toolbar:false;">fonction Compteur({initialCount}) { const [count, setCount] = useState(initialCount); retour ( ≪> Nombre : {compte} <bouton onClick={() => setCount(initialCount)}>Réinitialiser</bouton> <bouton onClick={() => setCount(prevCount => prevCount + 1)}>+</bouton> <bouton onClick={() => setCount(prevCount => prevCount - 1)}>-</bouton> ≪/> ); }</pré> <p>Mettre à jour directement <code>count</code> <pre class="brush:php;toolbar:false;">fonction Compteur({initialCount}) { const [count, setCount] = useState(initialCount); retour ( ≪> Nombre : {compte} <bouton onClick={() => setCount(initialCount)}>Réinitialiser</bouton> <bouton onClick={() => setCount(count + 1)}>+</bouton> <bouton onClick={() => setCount(count - 1)}>-</bouton> ≪/> ); }</pré> <p>Je ne vois aucune différence de comportement et je ne peux pas imaginer une situation dans laquelle le décompte ne serait pas mis à jour (ou ne serait pas à jour). Parce que chaque fois que le décompte change, une nouvelle fermeture sera appelée pour capturer le dernier décompte. </p>

function Stream() {
  const [feedItems, setFeedItems] = useState([]);
  const { fetching, error, data, run } = useQuery(SOME_QUERY, vars);

  useEffect(() => {
    if (data) {
      setFeedItems([...feedItems, ...data.items]);
    }
  }, [data]);     // <---- 这违反了hooks的规则，缺少了feedItems

...
<button onClick={()=>run()}>获取更多</button>
...

useEffect(() => {
    if (data) {
      setFeedItems(prevItems => [...prevItems, ...data.items]);
    }
  }, [data]);     //  <--- 现在一切都好了

function Counter({initialCount}) {
  const [count, setCount] = useState(initialCount);
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(initialCount)}>重置</button>
      <button onClick={() => {
        setCount(prevCount => prevCount + 1); 
        setCount(prevCount => prevCount + 1)}
      }>+</button>
    </>
  );
}

function Counter({initialCount}) {
  const [count, setCount] = useState(initialCount);
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(initialCount)}>重置</button>
      <button onClick={() => {
        setCount(count + 1); 
        setCount(count + 1)}
      }>+</button>
    </>
  );
}