<p>Ich habe die Dokumentation zu React Hook-Funktionsaktualisierungen gelesen und diesen Satz gesehen: </p> <blockquote> <p>Die Schaltflächen „+“ und „-“ verwenden eine funktionale Form, da der aktualisierte Wert auf dem vorherigen Wert basiert</p> </blockquote> <p>Aber ich kann den Zweck von Funktionsaktualisierungen und den Unterschied zwischen ihnen und der direkten Verwendung des alten Zustands bei der Berechnung des neuen Zustands nicht erkennen. </p> <p><strong>Warum erfordert die Aktualisierungsfunktion von React useState Hook ein Funktionsaktualisierungsformular? </strong> <strong>Was sind einige Beispiele, bei denen der Unterschied deutlich sichtbar ist (und daher die Verwendung einer direkten Aktualisierung zu einem Fehler führen würde)? </strong></p> <p>Wenn ich beispielsweise das Beispiel in der Dokumentation wie folgt ändere: </p> <pre class="brush:php;toolbar:false;">function Counter({initialCount}) { const [count, setCount] = useState(initialCount); zurückkehren ( <> Anzahl: {count} <button onClick={() => setCount(initialCount)}>Reset</button> <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button> <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button> </> ); }</pre> <p>Aktualisieren Sie <code>count</code> <pre class="brush:php;toolbar:false;">function Counter({initialCount}) { const [count, setCount] = useState(initialCount); zurückkehren ( <> Anzahl: {count} <button onClick={() => setCount(initialCount)}>Reset</button> <button onClick={() => setCount(count + 1)}>+</button> <button onClick={() => setCount(count - 1)}>-</button> </> ); }</pre> <p>Ich sehe keinen Unterschied im Verhalten und kann mir keine Situation vorstellen, in der die Zählung nicht aktualisiert wird (oder nicht auf dem neuesten Stand ist). Denn jedes Mal, wenn sich die Zählung ändert, wird ein neuer Abschluss aufgerufen, um die letzte Zählung zu erfassen. </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>
    </>
  );
}