Rumah > Soal Jawab > teks badan
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]); // <--- 现在一切都好了
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> </> ); }