键未定义 React
2018-05-02
2665
我正在构建一个小任务。当我们按下“添加用户”按钮时，我们会看到一个表单，里面有输入。当我们在输入中输入信息时，我们可以按下“发送信息”按钮。然后我们添加一个新用户。我使用 react 来构建它。当我将新用户添加到用户数组时，我为该用户创建了 id。然后我使用这个 id。但问题是，在我将信息放入表单并按下“发送信息”按钮后，我在控制台中看到“Inline Babel script:39 Uncaught ReferenceError: key is not defined”。为什么会发生这种情况？
.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/[email protected]/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个回答
console.log(id); 应更改为 console.log(user.id);
Rohith Murali
2018-05-02
问题出在这个类的实现中：
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 函数引用了几个未定义的变量。
为了使这个类无错误地执行，render 函数需要删除对未定义变量的引用，或者为这些变量提供定义。
值得注意的是，这个插值语法：
<div>{ someVariable }</div>
要求
someVariable
是块范围内定义的变量。
插值中的代码（即本例中的
someVariable
）作为普通 JavaScript 执行。
这个特性允许我们编写这样的代码：
<div>2 + 2 is { 2 + 2 }</div>
呈现如下：
<div>2 + 2 is 4</div>
bgran
2018-05-02