如何在 useEffect() 钩子中访问变量

Question

我是React的新手，在useEffect钩子函数中初始化了一个名为socket的变量。我试图在return语句中访问它，但似乎无法访问。我不确定该如何处理。提前感谢！

function SendSocketData(socket) {

  socket.emit("hello", "world");

}


function App() {


  useEffect(()=> {
    let socket = io("http://localhost:3001",
    );


  },[]);





  return (
    <div className="App">
      <button onClick={()=>SendSocketData(socket)}>Send Data </button>
    </div>
  );
}

export default App;

- json

---

在useState变量中声明socket，然后使用useEffect设置状态。 - Moukim hfaiedh

Answer 1

你可以在组件外部定义变量，或者在函数内部声明变量，然后在 useEffect 中给它赋值。

function SendSocketData(socket) {

  socket.emit("hello", "world");

}

let socket;

function App() {

  useEffect(()=> {
    socket = io("http://localhost:3001",)
  }, []);

  return (
    <div className="App">
      <button onClick={()=>SendSocketData(socket)}>Send Data </button>
    </div>
  );
}

export default App;

或者

function App() {
  let socket;

  useEffect(()=> {
    socket = io("http://localhost:3001",)
  }, []);

  return (
    <div className="App">
      <button onClick={()=>SendSocketData(socket)}>Send Data </button>
    </div>
  );
}

- samehanwar

Answer 2

首先需要使用 useState() 声明 socket 对象作为变量：

import React, { useState, useEffect } from 'react';

const [socket, setSocket] = useState(null);

然后使用 useEffect() 进行分配：

  useEffect(()=> {
    setSocket(io("http://localhost:3001"));
  },[]);

- Or Assayag

Answer 3

完成它：

    function App() {
        const socket = io("http://localhost:3001",
    );
    useEffect(()=> {}

或者使用 useState:

    function App() {
        const [socket, setSocket ] = useState(null);

    );
    useEffect(()=> {
        setSocket(io("http://localhost:3001"));
    }
    

- Fahad Tahir

Answer 4

你可以尝试将socket存储在一个名为state的变量中。类似这样：

    import React, { useState, useEffect } from "react";
    import io from "socket.io-client";
    
    function App() {
      const [socket, setSocket] = useState();
    
      useEffect(() => {
        setSocket(io("http://localhost:3001"));
      }, []);

      function SendSocketData(socket) {
         socket.emit("hello", "world");
      }
    
      return (
          <div className="App">
            <button onClick={()=>SendSocketData(socket)}>Send Data </button>
          </div>
      );
    }
    
    export default App;

- Flavio Del Grosso