在 localStorage 中添加额外项目？

Question

我正在尝试在 React 中构建消息组件。目前我只是将输入的消息保存在 localStorage 中，但是每当我推送消息时，都会在 localStorage 中推送 2 行，这不应该发生。我已经检查过了，但无法理解为什么会发生这种情况。

消息合成

import React, { useState, useEffect } from "react";

interface IMessage {
  user: string;
  text: string;
}

export const Message = () => {
  const [messages, setMessages] = useState<IMessage[]>([]);
  const [message, setMessage] = useState("");
  const [user, setUser] = useState("testuser");

  useEffect(() => {
    const fetchedMessages = JSON.parse(localStorage.getItem("messages") as any);
    if (fetchedMessages) {
      console.log("fetchedMessages=>", fetchedMessages);
    }
  }, [messages]);

  const handleFormSubmit = (event: any) => {
    event.preventDefault();
    setMessages((messages) => {
      const newData = [...messages, { text: message, user: user }];
      let oldStorage =
        JSON.parse(localStorage.getItem("messages") as any) || [];
      const oldStorageN = [...oldStorage, { text: message, user: user }];
      localStorage.removeItem("messages");
      localStorage.setItem("messages", JSON.stringify(oldStorageN));
      return newData;
    });
    setMessage("");
  };

  return (
    <>
      <div className="MessageContainer">
        {messages.map((message) => {
          return (
            <div key={message.text + message.user}>
              <div>
                <strong>{message.user}</strong>
                <div>{message.text}</div>
              </div>
            </div>
          );
        })}
      </div>
      <div>
        <form onSubmit={handleFormSubmit}>
          <div>
            <input
              type="text"
              name="message"
              onChange={(e) => {
                setMessage(e.target.value);
              }}
              value={message}
            />
          </div>
          <div>
            <input type="submit" value="send" />
          </div>
        </form>
      </div>
    </>
  );
};

这是代码链接

https://stackblitz.com/edit/react-starter-typescript-qowlvq?file=components/Message.tsx

注意：在 StackBlitz 上它工作正常，但在我的机器上它为每条消息添加两个条目。