反应钩子 - 状态在功能中失去价值答案

【问题标题】：react hooks - state lose value in function反应钩子 - 状态在功能中失去价值
【发布时间】：2020-09-30 12:55:43
【问题描述】：

我有一个问题，我使用反应挂钩来跟踪用户令牌，并使用令牌在套接字连接中识别该用户。问题是，当我安装组件并设置套接字时，令牌按预期工作，当应用程序进入后台时，我关闭了套接字，但是当应用程序进入前台时，我执行了 setToken 函数来重新设置连接函数中的令牌有他的起始值（假）。我在屏幕上打印令牌，并且当在屏幕上显示为错误的函数时打印正确。

这是我的代码：


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;

【问题讨论】：

而不是声明一个超出Chat范围的变量。尝试将您的socket 变量放入ref。你不应该把这样的变量放在 React 中。可能会导致不必要的副作用。
Tnx 你是对的，我会在生产前改进代码！

标签： reactjs react-native socket.io react-native-gifted-chat

【解决方案1】：

你错过了一些状态设置！

当应用进入后台时，您没有清除令牌。
对于 appStateChange 函数参数 newState，您从那里初始化值
对于newState，当应用再次回到前台时，您没有更改值，因此不会调用setSocket()

【讨论】：

Tnx，我通过清除令牌并在应用程序进入前台时重置它来解决。