Dev Faq
0
votes

TypeError: Impossible de lire la propriété 'Handleclick' de non définie

J'apprends réagir et j'essaie de faire un petit projet. Ce projet montre une liste des utilisateurs d'un jsonlaceholder code> et voulait le faire pour éditer les champs.

J'ai une DIV qui charge la liste, une autre div cachée avec des champs modifiables et un bouton qui Lorsque vous avez cliqué sur la liste, div est masqué et que l'autre apparaît. p>

Lorsque je clique sur le bouton, il donne l'erreur suivante: P>

"TypeError: ne peut pas lire la propriété" Handleclick "de non défini" p> blockQuote>

Quelqu'un peut-il aider? p> 

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;

0 commentaires

3 Réponses :

2
votes

C'est parce que le rappel de la méthode de la carte ceci.state.user.map code> n'est pas lié. Vous devez le transformer en une fonction de flèche. Comme ceci:

p> 

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;

4 commentaires

Merci beaucoup!

Vous savez comment je peux le faire, mais juste sur l'utilisateur que je clique? Passer l'identifiant de l'utilisateur à la main de la main, par exemple

Oui, vous devez passer une fonction incidité, alors allez comme suit ce this.handleclick (utilisateur)}> modifier et ensuite l'utilisateur sera passé. comme paramètre sur la méthode. Ceci calcule l'effet de handleclick (utilisateur) mais ne s'exécute pas avant le clic

oui je l'ai fait aussi ahah je vais essayer de trouver le reste du code à l'intérieur de Hadleclick pour changer une seule

0
votes

Le problème est que this.handleclick est référencé à l'intérieur d'un rappel défini comme une fonction régulière qui est transmis à une carte . Fonction régulière ont Leurs valeurs de ceci qui n'est pas le composant.

Pour conserve la valeur de cette que vous appelez transmettez le rappel sur la carte en tant que fonction de flèche: xxx

. peut explicitement passer cette comme un second argument sur la carte xxx

0 commentaires
0
votes

Vous devez lier la méthode à l'objet.

Soit: xxx

ou: xxx

Sinon, il perd le contexte.

1 commentaires

Cela ne fonctionne pas pour et adjers une erreur supplémentaire: Rejet non géré (TypeError): impossible de lire la propriété 'Handleclick' de non définie

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO