cari

Rumah  >  Soal Jawab  >  teks badan

Mengapakah useState dan borang kemas kini berfungsi dalam React diperlukan?

<p>Saya sedang membaca dokumentasi tentang kemas kini fungsi React Hook dan melihat ayat ini: </p> <blockquote> <p>Butang "+" dan "-" menggunakan bentuk berfungsi kerana nilai yang dikemas kini adalah berdasarkan nilai sebelumnya</p> </blockquote> <p>Tetapi saya tidak dapat melihat tujuan kemas kini fungsi dan perbezaan antara mereka dan menggunakan keadaan lama secara langsung semasa mengira keadaan baharu. </p> <p><strong>Mengapakah fungsi kemas kini React useState Hook memerlukan borang kemas kini fungsi? </strong> <strong>Apakah beberapa contoh yang perbezaannya jelas kelihatan (dan oleh itu menggunakan kemas kini langsung akan mengakibatkan ralat)? </strong></p> <p>Sebagai contoh, jika saya menukar contoh dalam dokumentasi kepada: </p> <pre class="brush:php;toolbar:false;">function Counter({initialCount}) { const [count, setCount] = useState(initialCount); kembali ( <> Kira: {count} <butang onClick={() => setCount(initialCount)}>Reset</button> <butang onClick={() => setCount(prevCount => prevCount + 1)}>+</button> <butang onClick={() => setCount(prevCount => prevCount - 1)}>-</button> </> ); }</pre> <p>Kemas kini <kod>kira</kod> <pre class="brush:php;toolbar:false;">function Counter({initialCount}) { const [count, setCount] = useState(initialCount); kembali ( <> Kira: {count} <butang onClick={() => setCount(initialCount)}>Reset</button> <butang onClick={() => setCount(count + 1)}>+</button> <butang onClick={() => setCount(count - 1)}>-</button> </> ); }</pre> <p>Saya tidak nampak sebarang perbezaan dalam tingkah laku dan tidak dapat membayangkan situasi di mana kiraan tidak akan dikemas kini (atau tidak dikemas kini). Kerana setiap kali kiraan berubah, penutupan baharu akan dipanggil untuk menangkap kiraan terkini. </p>
P粉041856955P粉041856955456 hari yang lalu498

membalas semua(2)saya akan balas

  • P粉986937457

    P粉9869374572023-08-25 13:15:08

    Saya menghadapi keperluan ini baru-baru ini. Sebagai contoh, katakan anda mempunyai komponen yang mengisi tatasusunan dan dapat memuatkan sumber dinamik 10 item setiap kali berdasarkan beberapa tindakan oleh pengguna (seperti dalam kes saya apabila pengguna terus menatal ke bawah skrin .Kod itu kelihatan sedikit seperti ini:

    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>
    ...

    Jelas sekali, anda tidak boleh hanya menambah feedItems pada senarai kebergantungan useEffect hook kerana anda sedang memanggil setFeedItems di dalamnya, jadi anda akan terperangkap dalam satu gelung.

    Kemas kini berfungsi untuk menyelamatkan:

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

    balas
    0
  • P粉238355860

    P粉2383558602023-08-25 00:00:10

    Dalam React, kemas kini status adalah tidak segerak. Oleh itu, pada kemas kini seterusnya, mungkin terdapat nilai lama dalam count. Sebagai contoh, bandingkan keputusan dua contoh kod berikut:

    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>
        </>
      );
    }

    dan

    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>
        </>
      );
    }

    balas
    0
  • Batalbalas