如何在 onClick in react js 中解析'deletePerson is not a function'？

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;

这是主组件，其中显示人员列表(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.profile、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中，我像const MainComponent = (profiles, ..那样使用了profiles，但由于设置//get all element from Appconst { personProfil } = profiles错误而不起作用，所以我删除了它。

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>
);