React列表key警告排查：添加嘉宾后空块及key属性异常问题

核心问题 #

1. 参数传递错误：点击添加时，你把新嘉宾对象用{newGuess}包裹后传递，导致添加到列表的不是嘉宾对象本身，而是嵌套结构{newGuess: 嘉宾信息}。这会让Guess组件无法读取正确属性（比如about.name实际是about.newGuess.name），页面因此显示空块；同时item.id会变为undefined，所有新项的key都重复为undefined，触发"Each child in a list should have a unique 'key' prop"警告。
2. 组件名称拼写不一致：App中使用的是<FormAddGuest />，但组件定义为FromAddGuest（字母o错写成m），这会导致组件无法正常挂载（若为笔误请修正）。

修复步骤 #

1. 修正参数传递 #

在FormAddGuest的addGuests函数中，去掉外层对象包裹，直接传递嘉宾对象：

let addGuests = (e) => {
    e.preventDefault();

    const newGuess = {
        id: Date.now(),
        ...value,
    }
    console.log(newGuess)

    // 直接传递嘉宾对象，而非嵌套对象
    add(newGuess)
    setValue({number: '', name: '', age: '', city: '', partner: '',phone: '', country: ''})
}

2. 统一组件名称 #

将组件定义的FromAddGuest改为FormAddGuest，与App中的调用保持一致：

// 修正组件名称
const FormAddGuest = function ({add}) {
    // ... 原有代码逻辑不变
}

3. 优化State更新（可选但推荐） #

为避免多次快速添加时的闭包问题，将createNewGuess中的state更新改为函数式写法：

const createNewGuess = (newGuess) => {
    // 使用prev获取最新的state快照
    setGuess(prevGuess => [...prevGuess, newGuess])
}

修复后效果 #

• 点击添加嘉宾后，新嘉宾对象会正确加入列表，Guess组件能读取到完整属性，空块消失。
• 每个列表项的key为Date.now()生成的唯一值，不再触发key唯一性警告。

内容的提问来源于stack exchange，提问作者Максим Дмитриевич