React Hooks结合Provider实现多消息展示失败求助

你的问题核心在于消息状态更新时没有保留原有消息，每次添加新消息都覆盖了之前的数组。

关键修复点 #

检查你Context中的addMessage方法，确保更新状态时是基于之前的消息数组进行追加，而不是直接替换：

// 错误写法（会覆盖原有消息）
const addMessage = (msg: string) => {
  setMessages([{ msg }]);
};

// 正确写法（追加新消息）
const addMessage = (msg: string) => {
  setMessages(prevMessages => [...prevMessages, { msg }]);
};

原因说明 #

React的useState更新函数如果直接传新值，会完全替换旧状态。使用函数式更新（prev => newVal）可以确保拿到最新的状态快照，再通过扩展运算符...保留原有消息，最后添加新消息，这样数组就能累积所有消息。

验证效果 #

修复后，你通过三个setTimeout触发的addMessage会依次把三条消息加入数组，渲染时map函数就能遍历出所有消息，实现同时显示3条消息的预期效果。

内容的提问来源于stack exchange，提问作者user5711656