我正在学习 React,并且正在尝试做一个小项目。该项目显示 jsonPlaceholder
的用户列表,并希望使其能够编辑字段。
我有一个加载列表的 div,另一个带有可编辑字段的隐藏 div 和一个按钮,单击该按钮时列表 div 会隐藏,另一个会出现。
当我单击按钮时,出现以下错误:
"TypeError: Can not read property 'handleClick' of undefined"
有人可以帮忙吗?
import React from 'react';
import './App.css';
class User extends React.Component {
constructor(){
super();
this.state = {
users: [],
displayList: 'block',
displayForm: 'none'
}
this.handleClick = this.handleClick.bind(this);
}
componentDidMount(){
this.getUsers();
}
getUsers(){
fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json())
.then(json => this.setState({users: json}));
}
handleClick(){
this.setState({displayList: 'none', displayForm: 'block'})
}
render(){
const list = this.state.displayList;
const form = this.state.displayForm;
return (
<ul>
{this.state.users.map(function(item){
return (
<div key={item.id}>
<br></br>
<div style={{display: list}}>
<h2>{item.name} </h2>
<p>Email: {item.email} </p>
<p>Address: </p>
<ul>
<li>Street: {item.address.street} </li>
<li>Suite: {item.address.suite} </li>
<li>City: {item.address.city} </li>
<li>ZipCode: {item.address.zipcode} </li>
</ul>
<p>Phone: {item.phone} </ p>
</div>
<div style={{display: form}} >
<div>
<h2>{item.name} </h2>
<p>Email: <input value = {item.email} className="form-control" onChange=""/> </p>
<p>Address: </p>
<ul>
<li>Street: <input value = {item.address.street} className="form-control" /> </li>
<li>Suite: <input value = {item.address.suite} className="form-control" /> </li>
<li>City: <input value = {item.address.city} className="form-control" /> </li>
<li>ZipCode: <input value = {item.address.zipcode} className="form-control" /> </li>
</ul>
<p>Phone: <input value = {item.phone} className="form-control" /> </p>
</div>
</div>
<button onClick={() => this.handleClick()}> Edit </button>
<hr></hr>
</div>
)
})}
</ul>
);
}
}
export default User;
最佳答案
是因为map方法this.state.users.map
中的回调没有绑定(bind)。您需要将其转换为箭头函数。像这样:
import React from 'react';
import './App.css';
class User extends React.Component {
constructor(){
super();
this.state = {
users: [],
displayList: 'block',
displayForm: 'none'
}
this.handleClick = this.handleClick.bind(this);
}
componentDidMount(){
this.getUsers();
}
getUsers(id){
fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json())
.then(json => this.setState({users: json}));
}
handleClick(){
this.setState({displayList: 'none', displayForm: 'block'})
}
render(){
const list = this.state.displayList;
const form = this.state.displayForm;
return (
<ul>
{this.state.users.map((item => {
return (
<div key={item.id}>
<br></br>
<div style={{display: list}}>
<h2>{item.name} </h2>
<p>Email: {item.email} </p>
<p>Address: </p>
<ul>
<li>Street: {item.address.street} </li>
<li>Suite: {item.address.suite} </li>
<li>City: {item.address.city} </li>
<li>ZipCode: {item.address.zipcode} </li>
</ul>
<p>Phone: {item.phone} </ p>
</div>
<div style={{display: form}} >
<div>
<h2>{item.name} </h2>
<p>Email: <input value = {item.email} className="form-control" onChange=""/> </p>
<p>Address: </p>
<ul>
<li>Street: <input value = {item.address.street} className="form-control" /> </li>
<li>Suite: <input value = {item.address.suite} className="form-control" /> </li>
<li>City: <input value = {item.address.city} className="form-control" /> </li>
<li>ZipCode: <input value = {item.address.zipcode} className="form-control" /> </li>
</ul>
<p>Phone: <input value = {item.phone} className="form-control" /> </p>
</div>
</div>
<button onClick={this.handleClick}> Edit </button>
<hr></hr>
</div>
)
}))}
</ul>
);
}
}
export default User;
关于javascript - 类型错误 : Cannot read property 'handleClick' of undefined,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57060718/