如何在反应js中解决onClick内部的“deletePerson不是函数”？

Question

这是放置函数的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 组件）：

//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（注意我在 MainComponent 中使用const）处理错误

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

人员列表显示正确，但是当我单击删除按钮时，我收到错误 deletePerson 不是函数。如何解决这个错误？

Answer 1

通常功能组件接受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

Answer 2

改变

const MainComponent = (profiles, deletePerson) => {

到

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

---

因为你要传递道具，所以你需要通过 props.profiles、props.deletePerson 来提取这些道具。 你可以简单地通过“解构”来做到这一点

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

Answer 3

1 • 我解决了这个问题，在 MainComponent 中，我必须将 personProfil 与 App.js 中的大括号 { ... } 一起呈现：

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

代替

const MainComponent = (profiles, deletePerson) => {

因为在 App.js 中我使用了 profiles 那样的 const MainComponent = (profiles, .. 但没有工作，因为我错误地设置了 //get all element from App const { personProfil } = profiles 我删除了它。 em>

2 • 我将它更改为 personProfil，因为我在 App.js 中的 <MainComponent personProfil={this.state.profiles} .... /> 中呈现它：

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