反应挂钩-在函数中造成价值损失

问题描述

我有问题，我使用react钩子跟踪用户令牌，并使用令牌在套接字连接中标识该用户。 问题是，当我安装组件并设置套接字时，令牌按预期工作，当应用程序进入后台后，我关闭套接字，但是当应用程序进入前台并执行setToken函数以重新设置连接时，函数中的令牌具有其初始值（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;

解决方法

您缺少某些状态设置！

1. 应用程序进入后台时，您没有清除令牌。
2. 对于appStateChange函数参数newState，您将从此处初始化值
3. 对于newState，当应用再次出现时，您没有更改值，因此不会调用setSocket（）