Reactjs react hooks-函数中的状态丢失值

我有一个问题，我使用react钩子跟踪用户令牌，并使用令牌在套接字连接中标识该用户。 问题是，当我挂载组件并设置套接字时，令牌按预期工作，当应用进入后台后，我关闭套接字，但当应用进入前台，我执行setToken函数以重新设置连接时，函数中的令牌具有其起始值（false）。我在屏幕上打印令牌，并且当在功能中显示为false时，屏幕打印正确

这是我的代码：

let socket;

const Chat = (props) => {
  const [messages, setMessages] = useState([]);
  const [users, setUsers] = useState({});
  const [token, setToken] = useState(false);

  useEffect(() => {
    init();
    return ()=> { 
      socket.close();
      AppState.removeEventListener('change', appStateChange);  
    }
  }, []);

  const init = async () => {
    // [...] get the token
  };

  const appStateChange = async (newState) => {
    if (newState === "active") {
      setSocket(); //--------- EXECUTING FROM HERE THE TOKEN IS FALSE ---------//
    }
    if (newState !== "active") {
      socket.close();
    }
  }  

  useEffect(() => {
    if (token) {
      setSocket(); //--------- EXECUTING FROM HERE THE TOKEN IS CORRECT ---------//
    }
  }, [token]);

  const setSocket = async () => {
    socket = io("http://192.168.1.172:3000/", {
        query: {
        token: token, 
        userTo: props.userTo
      },
    });

    socket.on("init", (data) => {
      setUsers(data.users);
      setMessages(data.messages);
    });

    socket.on("newMessage", (data) => {
      onReceive({
        _id: data._id,
        text: data.text,
        createdAt: new Date(),
        user: {
          _id: data.user._id,
          name: data.user.name,
          avatar: data.user.avatar,
        },
      });
    });
  };

  const onSend = useCallback((messages = []) => {
    setMessages((previousMessages) =>
      GiftedChat.append(previousMessages, messages)
    );
    socket.emit("newMessage", messages);
    console.log(messages)
  }, []);

  const onReceive = useCallback((received) => {
    setMessages((previousMessages) =>
      GiftedChat.append(previousMessages, received)
    );
  }, []);

  return (
    <View style={{flex:1}}>
      <Text>{token}</Text>
      {/*--------- HERE THE TOKEN IS CORRECT ---------*/}
    </View>
  );
};

export default Chat;

让插座；
const Chat=（道具）=>{
const[messages，setMessages]=useState（[]）；
const[users，setUsers]=useState（{}）；
const[token，setToken]=useState（false）；
useffect（（）=>{
init（）；
return（）=>{
socket.close（）；
removeEventListener（'change'，appStateChange）；
}
}, []);
const init=async（）=>{
//[…]获取令牌
};
const appStateChange=async（newState）=>{
如果（新闻状态==“活动”）{
setSocket（）；//-----------从此处执行标记为FALSE---------//
}
如果（新闻状态！=“活动”）{
socket.close（）；
}
}  
useffect（（）=>{
如果（令牌）{
setSocket（）；//-----------从此处执行标记是正确的---------//
}
}，[token]）；
const setSocket=async（）=>{
套接字=io（“http://192.168.1.172:3000/", {
查询：{
令牌：令牌，
userTo:props.userTo
},
});
socket.on（“init”，（数据）=>{
setUsers（data.users）；
设置消息（data.messages）；
});
socket.on（“newMessage”，（数据）=>{
收到({
_id：数据。\u id，
text:data.text，
createdAt:新日期（），
用户：{
_id:data.user.\u id，
名称：data.user.name，
化身：data.user.avatar，
},
});
});
};
const onSend=useCallback（（messages=[]）=>{
设置消息（（以前的消息）=>
GiftedChat.append（以前的消息、消息）
);
发出（“newMessage”，messages）；
console.log（消息）
}, []);
const onReceive=useCallback（（已接收）=>{
设置消息（（以前的消息）=>
GiftedChat.append（以前的消息，已收到）
);
}, []);
返回(
{token}
{/*-----------这里的令牌是正确的------*/}
);
};
导出默认聊天；

您遗漏了一些状态设置

当应用程序转到后台时，您没有清除令牌

对于appStateChange函数参数newState，从中初始化值

对于newState，当应用程序再次出现在前台时，您没有更改该值，因此不会调用setSocket（）

---

而不是声明

聊天

范围之外的变量。尝试将

套接字

变量放入

ref

中。您不应该在React中放入这样的变量。可能会导致不必要的副作用。Tnx你是对的，我会在继续生产之前改进代码！Tnx，我通过清除令牌并在应用程序进入前台时重置它来解决。