Javascript 如何在React中保留聊天信息？

在React内置的聊天应用程序中，我的目的是将聊天消息存储在localStorage中。以下是代码供您参考

const [textMessages, setTextMessages] = useState([]);
const [textValue, setTextValue] = useState('')

useEffect(() => {
        localStorage.getItem('messages') // Doesn't load the stored data
      }, []);

const sendMessage = (e) => {
        e.preventDefault();
    
        if (textValue != "") {

          const newData = []
          newData.push([...textMessages, textValue])
          setTextMessages([...textMessages, textValue]);
          localStorage.setItem('messages', JSON.stringify(newData))

          setTextValue("");

        } else {
          return;
        }
      };

return (
<>
<button type="submit" onClick={sendMessage}>
            Send Message
</button>
</>
)

const[textMessages，setTextMessages]=useState（[]）；
const[textValue，setTextValue]=useState（“”）
useffect（（）=>{
localStorage.getItem（'messages'）//不加载存储的数据
}, []);
const sendMessage=（e）=>{
e、 预防默认值（）；
如果（textValue！=“”）{
const newData=[]
newData.push（[…textMessages，textValue]）
setTextMessages（[…textMessages，textValue]）；
localStorage.setItem（'messages'，JSON.stringify（newData））
setTextValue（“”）；
}否则{
返回；
}
};
返回(
发送消息
)

---

最好的解决方案是什么？下面是codesandbox链接：

您需要将JSON字符串解析回数组，并设置您的状态：

useEffect(() => {
    const savedMessages = JSON.parse(localStorage.getItem('messages'))
    if (savedMessages !== null) {
        setTextMessages(savedMessages)
    }
}, []);

其他值得思考的事情，但我不会在简单的示例中包括：

• 考虑在try catch中包装

  JSON.parse（）

  ，以防用户修改了其本地存储，而该存储现在是无效的JSON
• 将本地存储密钥存储为常量可防止从多个位置设置/获取项目时出现打字错误（例如，

  const-storageKey='messages'；localStorage.getItem（storageKey）

  ）

---

您的

localStorage.getItem（'messages'）

应该返回数据，您只是没有对它做任何操作（例如，将它存储到变量，格式化它，并将它设置回状态）加载页面时数据丢失OK，因此需要将数据存储在变量中？抛出错误“textMessages is not iterable”OK错误消失，数据也保留在localStorage中，但加载时消息丢失