javascript - 类型错误 : Cannot read property 'handleClick' of undefined

Question

我正在学习 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;

Answer 1

是因为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;