使用useState更新数组成功后，map方法无法渲染新添加元素问题求助

问题根因 #

核心是对象属性名拼写不一致：

• 初始的initialList里名字字段命名为guesstName（含两个s）
• 新增的guest对象里名字字段命名为guestName（仅一个s）
• map渲染时读取的是element.guesstName，新增对象没有该字段，因此渲染为空，看似没有显示新增元素。

解决方案 #

统一属性名即可，推荐统一使用正确拼写的guestName，修改三处代码：

1. 调整初始对象的属性名：

const initialList={id:1, guestName:'Alan', guesstLastName:'Williams',guesstEmail:'alan3@gmail.com'}

2. 调整map渲染的取值字段：

{listOfGuesst.map(element=>{
    return <li key={element.id}>{element.guestName}</li>
})}

额外说明：你在addGuest里调用setListOfGuesst后直接打印listOfGuesst拿不到最新值，是因为React状态更新为异步逻辑，useEffect监听打印的才是更新后的最新状态。

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