Fungsi untuk dijalankan sebelum useEffect selesai

Question

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.

Answer 1

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

ini dijalankan sekali dalam kitaran hayat komponen (selepas pemaparan pertama).

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) {
    return 
Loading...
;
  }

  return ;
};

const ChatsPage = ({username, secret}) => {
  const chatProps = useMultiChatLogic('xxxxx-xxx-xxx-xxx-xxx', username, secret);

  return (
    

      
      
    
  );
};

username 和 secret 仍然是默认的空字符串，因此我们渲染一条加载消息。渲染后，useEffectDi 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 值可用（我假设它们保证在响应中为非空字符串），因此不会渲染加载消息。相反，我们渲染 ChatsPageSelepas beberapa ketika, respons tiba dan kami mempunyai komponen

yang menerima prop dengan data respons.

useMultiChatLogic 这样的钩子 必须在任何条件之上声明.如果这不是一个钩子，那么调用可以发生在 ifKomponen 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

. 🎜