React Native 中的 useState 获取先前状态的数据答案

【问题标题】：useState in React Native get data of previous stateReact Native 中的 useState 获取先前状态的数据
【发布时间】：2021-10-02 11:41:14
【问题描述】：

我有一个状态

  const [data, setData] = useState("");

还有 2 个在组件渲染时并行调用的 useEffects

     useEffect(() => {
       socket.on("message",()=>{
         console.log(data)
       })
     }, [socket])

    useEffect(() => {
       const res = getDataFromServer()
       setData(res.data)
     }, [isLoading])

第二个 useEffect 从服务器获取数据并设置状态，但是当套接字到达第一个 useEffect 数据时，初始状态为空。当套接字到达时，如何在第一个 useEffect 中获取更新的状态数据。如果我将数据设置为第一个 useEffect 的依赖项，则重新初始化套接字事件并多次调用回调。

【问题讨论】：

标签： react-native use-effect

【解决方案1】：

这可能会有所帮助

React.useEffect(() => {
    // This effect only executes on the initial render so that we aren't setting up the socket repeatedly.
    socket.on("message",()=>{
         console.log(data);
    })
    return () => {
      socket.off('message',() => {});
    }
  }, []);

【讨论】：

【解决方案2】：

您可以在 useEffect 中返回一个函数来清除不必要的处理程序/事件侦听器。

Effects with Cleanup - React Docs

在此函数中，您可以使用offAny method of socket.io client 删除之前的监听器。

useEffect(() => {
  const currentListener = socket.on("message",()=>{
    console.log(data)
  });

  return () => {
    socket.offAny(currentListener);
  };
}, [socket, data]);

【讨论】：

@rana_sadam 我从未使用过 mqtt，但如果它有办法删除事件侦听器（很可能有），那么它会起作用