Ключ не определен React
Строю небольшую задачу. Когда мы нажимаем кнопку «добавить пользователя» - мы видим форму, внутри которой есть входы. Когда мы вводим информацию во входы - мы можем нажать кнопку «отправить информацию». И добавляем нового пользователя. Я использую реакцию, чтобы построить это. Когда я добавляю нового пользователя в массив Users, я создаю идентификатор для этого пользователя. А потом я использую этот идентификатор. Но проблема в том, что после того, как я поместил информацию в форму и нажал кнопку «отправить информацию» - я вижу в консоли «Встроенный скрипт Babel: 39 Uncaught ReferenceError: key не определено ». Почему это происходит?
.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.info(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>Измените console.info (id) => console.info (user.id)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
console.info (идентификатор); следует заменить на console.info (user.id);
Да console.info меняю. Но проблема все еще остается
Теперь проблема связана с ключом = {ключ} в render () пользовательского компонента. Попробуйте удалить это.
как я могу это удалить? каждый элемент, созданный картой, нуждается в нем
Я имел в виду ключ из оператора в методе рендеринга пользовательского компонента. <div className = «user»> достаточно
Проблема в реализации этого класса:
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>{ someVariable }</div>
требует, чтобы someVariable был определенной переменной в рамках блока.
Код внутри интерполяции (то есть someVariable в данном случае) выполняется как обычный JavaScript.
Эта функция позволяет нам писать такой код:
<div>2 + 2 is { 2 + 2 }</div>
Это выглядит так:
<div>2 + 2 is 4</div>
console.info (идентификатор); <= в этот момент это будет user.id