Javascript 在react中保留局部变量

我想在我的应用程序中添加分页，因为我在下面的代码中进行了编码，但出现了一个问题

以下是我的效果：

 useEffect(() => {
    let x = null;
    const unsubscribe = chatsRef
      .orderBy("createdAt", "desc")
      .limit(10)
      .onSnapshot((querySnapshot) => {
        const messagesFirestore = querySnapshot
          .docChanges()
          .filter(({ type }) => type === "added")
          .map(({ doc }) => {
            const message = doc.data();

            x = message;

            return { ...message, createdAt: message.createdAt.toDate() };
          });

        appendMessages(messagesFirestore);

        if (latestMessage != null) {
          if (
            new Date(
              latestMessage["createdAt"]["seconds"] * 1000 +
                latestMessage["createdAt"]["nanoseconds"] / 1000000
            ) >
            new Date(
              x["createdAt"]["seconds"] * 1000 +
                x["createdAt"]["nanoseconds"] / 1000000
            )
          ) {
            latestMessage = x;
          }
        } else {
          latestMessage = x;
        }
      });

    return () => unsubscribe();
  }, []);

我从数据库中获取了数据，并将最旧的数据保存到

latestMessage

（用于分页），但问题是：

我在函数中声明了我的

latestMessage

，如下所示：

let latestMessage = null;
export default function ChatTutor({ route }) {
...
}

我将我的道具传递给ChatTutor组件（聊天室id、用户名…），并根据该id呈现聊天室及其数据。但是

latestMessage

总是设置一些值，当我转到父组件并单击另一个聊天室时，ChatTutor的值为

latestMessage

的其他值（最旧值）。当我转到父级时，如何将

latestMessage

null设置为空？

您可以使用存储本地可变数据（它不会参与重新渲染）：

导出默认函数ChatTutor（{route}）{
const latestMessage=useRef（null）；//null是初始值
// ...
latestMessage.current='一些新消息'//设置数据
console.log（latestMessage.current）//读取数据
返回聊天室组件
}
<代码>您是否考虑使用卸载生命周期使用效果挂钩？你们可以把它清理干净，但我想在我转到父组件的时候把它清理干净。“在那种情况下它能工作吗？”Tukarambosale当你离开孩子时，它会被卸下，我希望它能在这种情况下工作。
export default function ChatTutor({ route }) {
  const latestMessage = useRef(null);  // null is initial value
  // ...
  latestMessage.current = 'some new message' // set data
  console.log(latestMessage.current) // read data
  return <>ChatTutor Component</>
}