Javascript TypeError:无法读取属性'；handleClick'；未定义的

我正在学习React，我正在尝试做一个小项目。此项目正在显示

jsonPlaceholder

的用户列表，并希望使其能够编辑字段

我有一个加载列表的div，另一个带有可编辑字段的隐藏div，还有一个按钮，当单击该按钮时，列表div被隐藏，另一个出现

单击按钮时，会出现以下错误：

“TypeError:无法读取未定义的属性'handleClick'”

有人能帮忙吗

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;

从“React”导入React；
导入“/App.css”；
类用户扩展了React.Component{
构造函数（）{
超级（）；
此.state={
用户：[]，
显示列表：“块”，
显示形式：“无”
}
this.handleClick=this.handleClick.bind（this）；
}
componentDidMount（）{
这是getUsers（）；
}
getUsers（）{
取（'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；
返回(

{this.state.users.map（函数（项））{
返回(



{item.name}
电子邮件：{item.Email}

地址:


街道：{item.address.Street}
套件：{item.address.Suite}
城市：{item.address.City}
ZipCode:{item.address.ZipCode}

电话：{item.Phone}
              
                
{item.name}
电邮：

地址:


街道：
套房：
城市：
ZipCode：

电话：

                
              
this.handleClick（）}>Edit

)
})}

);
}
}
导出默认用户；

这是因为map方法

this.state.users.map

中的回调未绑定。您需要将其转换为箭头函数。像这样：

从“React”导入React；
导入“/App.css”；
类用户扩展了React.Component{
构造函数（）{
超级（）；
此.state={
用户：[]，
显示列表：“块”，
显示形式：“无”
}
this.handleClick=this.handleClick.bind（this）；
}
componentDidMount（）{
这是getUsers（）；
}
getUsers（id）{
取（'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；
返回(

{this.state.users.map（（项=>{
返回(



{item.name}
电子邮件：{item.Email}

地址:


街道：{item.address.Street}
套件：{item.address.Suite}
城市：{item.address.City}
ZipCode:{item.address.ZipCode}

电话：{item.Phone}
{item.name}
电邮：

地址:


街道：
套房：
城市：
ZipCode：

电话：

编辑

)
}))}

);
}
}
导出默认用户

这是因为map方法

this.state.users.map

中的回调未绑定。您需要将其转换为箭头函数。像这样：

从“React”导入React；
导入“/App.css”；
类用户扩展了React.Component{
构造函数（）{
超级（）；
此.state={
用户：[]，
显示列表：“块”，
显示形式：“无”
}
this.handleClick=this.handleClick.bind（this）；
}
componentDidMount（）{
这是getUsers（）；
}
getUsers（id）{
取（'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；
返回(

{this.state.users.map（（项=>{
返回(



{item.name}
电子邮件：{item.Email}

地址:


街道：{item.address.Street}
套件：{item.address.Suite}
城市：{item.address.City}
ZipCode:{item.address.ZipCode}

电话：{item.Phone}
{item.name}
电邮：

地址:


街道：
套房：
render () {
    /* ... */
    return (
      <ul>
        {this.state.users.map((item) => { /* ... */ })}
      </ul>
    )
}

render () {
    /* ... */
    return (
      <ul>
        {this.state.users.map(function(item) { /* ... */ }, this)}
      </ul>
    )
}

handleClick = () => {
    this.setState({displayList: 'none', displayForm: 'block'})
}

<button onClick={this.handleClick.bind(this)}> Edit </button>