Как решить 'deletePerson не является функцией' внутри onClick в реаги js? - PullRequest
Новая
       10

Как решить 'deletePerson не является функцией' внутри onClick в реаги js?

1 голос
/ 22 апреля 2020

Это AppComponent , где размещены функции (компонент контейнера): 


import React, { Component } from 'react';
import './App.css';
import MainComponent from './MainComponent/MainComponent';
import AddPerson from './MainComponent/AddPerson';

class App extends Component {
  state = {
    profiles : [
      { id: 1, name: "Ayman", age: 21, job: "Web developer" },
      { id: 2, name: "Mark", age: 20, job: "Desktop developer" },
      { id: 3, name: "Elena", age: 22, job: "Mobile developer" },
      { id: 4, name: "Mohamed", age: 25, job: "Database manager" }
    ]
  }

  //add new record
  addPerson = (person) => {
    let newperson = [...this.state.profiles, person];
    this.setState({
      profiles: newperson,
    })
  }
  //delete record by id
  deletePerson = (idToDel) => {
    let persons = this.state.profiles.filter(person => {
      return person.id !== idToDel;
    });
    this.setState({
      persons: persons,
    })
  }


  render() {
    return (
      <div className="App">
        <MainComponent personProfil={this.state.profiles} deletePerson={this.deletePerson} />
        <AddPerson addPerson={this.addPerson} />
      </div>
    );
  }
}

export default App;

Это MainComponent , где список лиц отображается (UI Component): 

//This is UI component

import React from 'react' ;


const MainComponent = (profiles, deletePerson) => {
    //get all element from App
    const { personProfil } = profiles;

    //assign all the elements in a constant
    //get person profiles
    const profilesList = personProfil.map(person => {
      if (person.age > 15) {
      return (
        <div className="person-content" key={person.id}>
          <div>ID: {person.id}</div>
          <div>Name: {person.name}</div>
          <div>Age: {person.age}</div>
          <div>Work as: {person.job}</div>
          <button onClick={() => {deletePerson(person.id)}}>Delete</button>
        </div>
      )} 
      else {
        return null;
      }

    })

    //*** show data ***
    return ( 
      <div className="profile-list">
        { profilesList }
      </div>
    )
}

export default MainComponent

Там, где ошибка обрабатывается из MainComponent (обратите внимание, что я использую const в MainComponent) 

<button onClick={() => {deletePerson(person.id)}}>Delete</button>

Список людей отображается корректно, но когда я нажимаю кнопку «Удалить», я получаю ошибку deletePerson не является функцией . Как решить эту ошибку?

Ответы [ 3 ]

3 голосов
/ 22 апреля 2020

Нормально работающие компоненты принимают props. Если вы хотите, чтобы они были разрушены, попробуйте следующий синтаксис (добавьте фигурные скобки {}): 

const MainComponent = ({personProfil, deletePerson}) => {
    //get all element from App

    //assign all the elements in a constant
    //get person profiles
    const profilesList = personProfil.map(person => {
      if (person.age > 15) {
      return (
        <div className="person-content" key={person.id}>
          <div>ID: {person.id}</div>
          <div>Name: {person.name}</div>
          <div>Age: {person.age}</div>
          <div>Work as: {person.job}</div>
          <button onClick={() => {deletePerson(person.id)}}>Delete</button>
        </div>
      )} 
      else {
        return null;
      }

    })

    //*** show data ***
    return ( 
      <div className="profile-list">
        { profilesList }
      </div>
    )
    }

    export default MainComponent
3 голосов
/ 22 апреля 2020

Изменить 

const MainComponent = (profiles, deletePerson) => {

На 

const MainComponent = ({profiles, deletePerson}) => {

Поскольку вы передаете реквизиты, вам нужно извлечь эти реквизиты через props.profiles, props.deletePerson. Вы можете сделать это просто "Разрушение"

https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/

0 голосов
/ 22 апреля 2020

1 • Я решил проблему, в MainComponent Я должен поставить personProfil, как показано в Приложении. js с фигурными скобками {...}: 

const MainComponent = ({personProfil, deletePerson}) => {

Вместо 

const MainComponent = (profiles, deletePerson) => {

Потому что в приложении js я использовал profiles вот так const MainComponent = (profiles, .., но не работал, потому что я было неправильно установить //get all element from App const { personProfil } = profiles Я удалил его.

2 • Я изменил его на personProfil, как я сделал это в: <MainComponent personProfil={this.state.profiles} .... /> in Приложение. js: 

render() {
    return (
      <div className="App">
        <MainComponent personProfil={this.state.profiles} deletePerson={this.deletePerson} />
        <AddPerson addPerson={this.addPerson} />
      </div>
    );
...