React useEffect 变量未在函数外部定义答案

【问题标题】：React useEffect vatibles are not defined outside the funtionReact useEffect 变量未在函数外部定义
【发布时间】：2020-08-19 00:47:00
【问题描述】：

我有一个范围问题，我试图在 React 的 useEffect 钩子中声明一个 const 变量，但该变量在函数之外没有被识别。

import React, {  useEffect } from "react";

function Commentsbox(props) {

  useEffect(() => {
    //Connect to socket server.
  const socket = socketIOClient(baseUrl);
  }, []);

async function postComment(content, user) {
      fetch(`${baseUrl}/comment/post`, {  
//Do something.  
      })
        .then((res) => res.json())
        .then((data) => {
         socket.emit("msgToServer", newComment);
});     
    }
  }

如您所见，我正在尝试做的是让客户端在响应来自服务器时立即发出名为 "msgToServer" 的新事件，但它会不断抛出该错误“未定义套接字”。

我试图通过在 useEffect 上方声明 socket 变量并给它一个 undefined 或 null 值来解决这个问题，然后在 useEffect() 中给它我想要的值，但它仍然没有定义.

function Commentsbox(props) {
let socket;
useEffect(() => {
    //Connect to socket server.
    socket = socketIOClient(baseUrl);
  }, []);
}

我不想在不使用 useEffect() 钩子的情况下赋予它价值，因为那样它会赋予它 10 倍的价值，这会导致 10 个与套接字的连接。

有人知道如何让它获得价值吗？

【问题讨论】：

@grzi 的建议是正确的。 const 变量的作用域是函数块，它们在提供给 useEffect 的函数之外不可用。

标签： javascript reactjs

【解决方案1】：

记得在你的 react 导入中包含 useEffect

import React, {  useEffect } from "react";

【讨论】：

【解决方案2】：

只需确保您的代码是最新的。检查

道具.items

【讨论】：

【解决方案3】：

使用 useState

function Commentsbox(props) {
const [socket, setSocket] = useState(initialValue);
useEffect(() => {
    //Connect to socket server.
    setSocket(socketIOClient(baseUrl));
  }, []);
}

【讨论】：