Question

我有问题，我使用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;

Answer 1

您缺少某些状态设置！

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

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

1 个答案: