Rumah > Soal Jawab > teks badan
Saya ada kod ini:
const ChatsPage = () => { let username = "" let secret = "" useEffect(() => { axios .post('http://localhost:3001/authenticate') .then((response) => { username = response.data.username secret = response.data.secret }) .catch((error) => { console.log(error); }); }, []); let chatProps = useMultiChatLogic('xxxxx-xxx-xxx-xxx-xxx', username, secret); return ( <div style={{ height: '100vh' }}> <MultiChatSocket {...chatProps} /> <MultiChatWindow {...chatProps} style={{ height: '100vh' }} /> </div> ); }
Masalahnya ialah let chatProps = useMultiChatLogic('xxxx-xx-x-xx-xxx', username, Secret);
在 useEffect
berjalan sebelum ia selesai. Saya cuba mengalihkannya ke dalam .then tetapi ia memberikan ralat cangkuk dan beberapa perkara lain tetapi tiada apa yang berhasil.
P粉9830211772024-04-02 00:44:59
Saya rasa anda kehilangan pemahaman asas tentang React. Lihat tutorial ini tentang keadaan, useEffect
dan aliran kawalan am.
useEffect
是异步的——首次渲染后以及每当设置依赖项数组中捕获的变量时,React 都会执行回调。您的依赖项数组为空,因此此 useEffect
adalah tak segerak - React melaksanakan panggilan balik selepas pemaparan pertama dan apabila pembolehubah yang ditangkap dalam tatasusunan dependensi ditetapkan. Tatasusunan dependensi anda kosong, jadi
Saya tidak tahu apa itu Multi, tetapi anda boleh mencuba sesuatu seperti ini:
const ChatsPageLoader = () => { const [username, setUsername] = useState(''); const [secret, setSecret] = useState(''); useEffect(() => { axios .post('http://localhost:3001/authenticate') .then((response) => { setUsername(response.data.username); setSecret(response.data.secret); }) .catch((error) => { console.log(error); }); }, []); if (!username || !secret) { returnLoading...; } return; }; const ChatsPage = ({username, secret}) => { const chatProps = useMultiChatLogic('xxxxx-xxx-xxx-xxx-xxx', username, secret); return ( ); };
username
和 secret
仍然是默认的空字符串,因此我们渲染一条加载消息。渲染后,useEffect
Di sini, pada paparan pertama, kami tahu bahawa permintaan itu masih belum selesai kerana nama pengguna
dan rahsia
masih menjadi rentetan kosong lalai, jadi kami memberikan mesej pemuatan. Selepas rendering, berjalan dan memulakan permintaan.
username
和 secret
设置状态,这会触发另一个渲染。在此渲染上,响应中的 username
和 secret
值可用(我假设它们保证在响应中为非空字符串),因此不会渲染加载消息。相反,我们渲染 ChatsPage
Selepas beberapa ketika, respons tiba dan kami mempunyai komponen
useMultiChatLogic
这样的钩子 必须在任何条件之上声明< /a>.如果这不是一个钩子,那么调用可以发生在 if
Komponen tambahan diperlukan kerana tiada komponen tambahan diperlukan dalam badan fungsi komponen selepas
setState
来完成,而不是 =
Peraturan emas React ialah keadaan tidak berubah, jadi jika mana-mana data berubah dari satu render ke yang seterusnya, ia mesti lulus