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

更改

const MainComponent = (profiles, deletePerson) => {

收件人

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

因为要传递道具，所以需要通过props.profiles，props.deletePerson提取这些道具。您只需通过“解构”即可做到这一点

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

Answer 2

通常，功能组件接受CREATE OR REPLACE TRIGGER MYTRIGGER BEFORE INSERT OR UPDATE OR DELETE ON MAP_CALCULATION_SHOP_LIMITS FOR EACH ROW DECLARE var_is_delete NUMBER; var_is_editable NUMBER; BEGIN SELECT COUNT(1) INTO var_is_delete FROM MAP_CALCULATION MC INNER JOIN map_calculation_group MG ON MC.ID_CALC = MG.ID_CALC WHERE MG.ID_CALC = MC.ID_CALC AND (mg.id_group = :old.id_group OR mg.id_group = :new.id_group) AND IS_DELETE='T'; SELECT COUNT(1) INTO var_is_editable FROM MAP_CALCULATION MC INNER JOIN map_calculation_group MG ON MC.ID_CALC = MG.ID_CALC WHERE MG.ID_CALC = MC.ID_CALC AND (mg.id_group = :old.id_group OR mg.id_group = :new.id_group) AND is_editable='F'; IF (UPDATING OR INSERTING) AND var_is_editable > 0 THEN RAISE_APPLICATION_ERROR( -20004, '.......' ); ELSIF DELETING AND var_is_delete > 0 THEN RAISE_APPLICATION_ERROR( -20005, '...............' ); END IF; END;。如果要使它们解构，请尝试以下语法（添加大括号{}）：

props

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 {{1 }}我将其删除。

2•我在 App.js 的const { personProfil } = profiles中渲染它时将其更改为 personProfil ：

<MainComponent personProfil={this.state.profiles} .... />

如何在React JS的onClick内部解决``deletePerson不是函数''？

3 个答案: