未定义键React

Question

我正在完成小任务。 当我们按下“添加用户”按钮时-我们看到一个表格，里面有输入。 当我们在输入中输入信息时-我们可以按下“发送信息”按钮。 并且我们添加了一个新用户。 我用React构建它。 当我将新用户添加到Users数组时，将为此用户创建ID。 然后，我使用此ID。 但是一个问题是，在我将信息放入表单并按下“发送信息”按钮之后，我在控制台中看到“ Inline Babel脚本：39 Uncaught ReferenceError：未定义键”。 为什么会发生？

 .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>

Answer 1

的console.log（ID）; 应该更改为console.log（user.id）;

Answer 2

问题在于此类的实现：

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>
    )
}      
}

渲染函数引用了几个未定义的变量。

为了使该类无错误地执行，render函数要么需要删除对未定义变量的引用，要么为这些变量提供定义。

值得注意的是，这种插值语法：

<div>{ someVariable }</div>

需要someVariable成为块范围内的已定义变量。 插值内的代码（在这种情况下，即someVariable ）作为普通JavaScript执行。

此功能使我们可以编写如下代码：

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

呈现如下：

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

未定义键React

问题描述

2 个解决方案

解决方案1
1 2018-05-02 14:26:52

解决方案2
0 2018-05-02 22:09:01

未定义键React

问题描述

2 个解决方案

解决方案1 1 2018-05-02 14:26:52

解决方案2 0 2018-05-02 22:09:01

解决方案1
1 2018-05-02 14:26:52

解决方案2
0 2018-05-02 22:09:01