未定義鍵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