未定义键React
[英]key is not defined React
问题描述
I am building small task. 
我正在完成小任务。 When we press button "add user" - we see a form, which has inputs inside. 当我们按下“添加用户”按钮时-我们看到一个表格，里面有输入。 When we put info in inputs - we can press button "send info". 当我们在输入中输入信息时-我们可以按下“发送信息”按钮。 And we add a new user. 并且我们添加了一个新用户。 I use react to build it. 我用React构建它。 When I add new user to Users array I create id for this user. 当我将新用户添加到Users数组时，将为此用户创建ID。 And then I use this id. 然后，我使用此ID。 But a problem is that after I put info in form and press button "send info" - I see in console "Inline Babel script:39 Uncaught ReferenceError: key is not defined". 但是一个问题是，在我将信息放入表单并按下“发送信息”按钮之后，我在控制台中看到“ Inline Babel脚本：39 Uncaught ReferenceError：未定义键”。 Why does it happen? 为什么会发生？
.user{ display: flex; width: 100vw; } .user-name, .user-phone, .user-address, .user-photo, .buttons{ width: 20vw; } #header{ background: goldenrod; display: flex; width: 100vw; margin-top: 6vw; } #add-user-btn{ position: absolute; top:2vw; right: 1vw; }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello World</title> <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> <link rel="stylesheet" href="main.css"> </head> <body> <div id="root"></div> <script type="text/babel"> class MainContainer extends React.Component{ constructor(){ super(); this.state={ Users: [] } } render(){ let usersToShow=this._getUser(); let id; return( <div> <HeaderTab/> {usersToShow} <Form addUser={this._addUser.bind(this)}/> </div> ) } makeid() { var text = ""; var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; for (var i = 0; i < 10; i++) text += possible.charAt(Math.floor(Math.random() * possible.length)); return text; } _addUser(name, phone, address){ const user = { id: this.makeid(), name, phone, address } console.log(user.id); this.setState({Users: this.state.Users.concat([user])}) } _getUser(){ return (this.state.Users.map((user)=>{ return( <User key={user.id} name={user.name} phone={user.phone} address={user.address}/> ); }) ) } } class Form extends React.Component{ constructor(){ super(); this.state={ displayModal: false } } render(){ let form; let btnText; if (this.state.displayModal){ form=<div id ="form"> <form onSubmit ={this._handleSubmit.bind(this)}> <input type="text" placeholder="name" ref={(input)=>this._name=input}></input> <input type="text" placeholder="address" ref={(input)=>this._address=input}></input> <input type="tel" placeholder="phone" ref={(input)=>this._phone=input}></input> <button type="submit">Send info</button> </form> </div>; btnText= 'cansel' } else{ form=null; btnText= 'addUser' } return( <div> <button id="add-user-btn" onClick={this._showModal.bind(this)}>{btnText}</button> {form} </div>) } _showModal(){ this.setState( {displayModal: !this.state.displayModal} ); } _handleSubmit(event){ event.preventDefault(); let name=this._name; let phone=this._phone; let address=this._address; this.props.addUser(name.value, phone.value, address.value); } } class HeaderTab extends React.Component{ render(){ return( <header id="header"> <div className="user-name">Name</div> <div className="user-phone">Phone</div> <div className="user-address">Address</div> <div className="user-photo">Photo</div> <div className="buttons"></div> </header> ) } } 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> ) } } ReactDOM.render( <MainContainer/>, document.getElementById('root') ); </script> </body> </html>
2 个解决方案
解决方案1
1 2018-05-02 14:26:52
console.log(id); 的console.log（ID）; should be changed to console.log(user.id); 应该更改为console.log（user.id）;
解决方案2
0 2018-05-02 22:09:01
The problem is in the implementation of this class: 问题在于此类的实现：
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>
)
}
}
The render function refers to several undefined variables. 渲染函数引用了几个未定义的变量。
In order for this class to execute without errors, the render function either needs to remove the references to undefined variables or provide definitions for those variables. 为了使该类无错误地执行，render函数要么需要删除对未定义变量的引用，要么为这些变量提供定义。
It's worth noting that this interpolation syntax: 值得注意的是，这种插值语法：
<div>{ someVariable }</div>
requires someVariable to be a defined variable within the scope of the block. 需要someVariable成为块范围内的已定义变量。 The code inside the interpolation (ie someVariable in this case) is executed as ordinary JavaScript. 插值内的代码（在这种情况下，即someVariable ）作为普通JavaScript执行。
This feature allows us to write code like this: 此功能使我们可以编写如下代码：
<div>2 + 2 is { 2 + 2 }</div>
Which is rendered like this: 呈现如下：
<div>2 + 2 is 4</div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.