Javascript 未定义键

我正在做一个小任务。当我们按下“添加用户”按钮时，我们看到一个表单，里面有输入。当我们在输入中输入信息时，我们可以按“发送信息”按钮。我们添加了一个新用户。我使用react来构建它。当我将新用户添加到用户数组时，我将为此用户创建id。然后我使用这个id。但问题是，在我将信息放入表单并按下“发送信息”按钮后，我在控制台中看到“内联巴贝尔脚本：39未捕获引用错误：键” 没有定义”。为什么会这样

.user{
显示器：flex；
宽度：100vw；
}
.用户名、.用户电话、.用户地址、.用户照片、.按钮{
宽度：20vw；
}
#标题{
背景：一枝黄花；
显示器：flex；
宽度：100vw；
利润率最高：6vw；
}
#添加用户btn{
位置：绝对位置；
top:2vw；
右：1vw；
}

你好，世界
类MainContainer扩展了React.Component{
构造函数（）{
超级（）；
这个州={
用户：[]
}
}
render（）{
让usersToShow=this.\u getUser（）；
让我看看你的身份证；
返回(
{usersToShow}
)
}   
makeid（）{
var text=“”；
var-mablue=“ABCDEFGHIJKLMNOPQRSTUVXYZABCDFGHIJKLMNOPQRSTUVXYZ0123456789”；
对于（变量i=0；i<10；i++）
text+=可能的.charAt（Math.floor（Math.random（）*可能的.length））；
返回文本；
} 
_addUser（姓名、电话、地址）{
常量用户={
id:this.makeid（），
名称
电话，
地址
}
console.log（user.id）；
this.setState（{Users:this.state.Users.concat（[user]）}）
}
_getUser（）{
return（this.state.Users.map）（（user）=>{
返回(
);
})
)
}
}  
类形式扩展了React.Component{
构造函数（）{
超级（）；
这个州={
displaymodel:false
}
}
render（）{
让它形成；
让btnText；
if（this.state.displaymodel）{
形式=
这个。_name=input}>
这个。_address=input}>
这个。_phone=input}>
发送信息
;
btnText='cansel'
}
否则{
form=null；
btnText='addUser'
}
返回(
{btnText}
{form}
)
}  
_showModal（）{
这是我的国家(
{displaymodel:！this.state.displaymodel}
);
}
_handleSubmit（事件）{
event.preventDefault（）；
让name=this.\u name；
让电话=这个；
让地址=此地址；
this.props.addUser（name.value、phone.value、address.value）；
}
} 
类HeaderTab扩展了React.Component{
render（）{
返回(
名称
电话
地址
照片
)
}  
} 
类用户扩展了React.Component{
render（）{
返回(
{name}
{电话}
{地址}
删除
编辑
)
}      
}
ReactDOM.render(
,
document.getElementById（'root'））
);

控制台日志（id）；应更改为console.log（user.id）

问题在于此类的实现：

class User extends React.Component{
        render(){
            return(
            <div className="user" key={key}>
                 <div className="user-name">{name}</div>
                 <div className="user-phone">{phone}</div>
                 <div className="user-address">{address}</div>
                 <div className="user-photo"></div>
                 <div className="buttons">
                     <button className="delete">delete</button>
                     <button className="edit">edit</button>
                 </div>
            </div>
    )
}      
}

其呈现方式如下：

<div>2 + 2 is { 2 + 2 }</div>

<div>2 + 2 is 4</div>

2+2等于4

console.log（id）；Change console.log（id）=>console.log（user.id）Yes console.log I Change。但问题仍然是，现在的问题是用户组件的render（）中的key={key}。试着移除它。我如何移除它？react need itI中map创建的每个元素都表示用户组件的render方法中语句中的键。够了

<div>2 + 2 is 4</div>