TypeError：props.onDeleteClick不是函数

2024-05-07 • 问答

我是React的新手，我正在尝试使Delete和Edit按钮起作用。但这给了我这个错误“ TypeError：props.onDeleteclick不是函数”

import React from "react";
import Person from "./Person";
import * as UserService from "../services/userServices";

class People extends React.Component
{
    state = {
        template: [],// editperson: ""
    };

    componentDidmount(){
        this.onShowPeople();
    }

    // Delete Button function

    onDeleteclick = myId => {
        console.log(myId);
    }

    onDeleteError = errr => {
        console.log(errr)
    };

    onShowPeople = () => {
        UserService
        .showAllPeople()
        .then(this.onDisplaySuccess)
        .catch(this.onDisplayError)
    }

    onDisplaySuccess = res => {
        console.log("Success!")
        console.log(res.item.pagedItems)

        this.setState({
            template: res.item.pagedItems.map(this.renderPersonTemplate)
        });
    }

    onDisplayError = err => console.log("Display Error");

    renderPersonTemplate = person => {
        return <Person person={person} key={person.id}/>;
    }

    render()
    {
        return (
            <React.Fragment>
                <div classname="container">
                    <div classname="template">
                        {this.state.template}
                    </div>
                </div>
            </React.Fragment>
        );
    }
}

导出默认人员； enter image description here

我只是想从我的页面和服务器中删除它。

您的Person组件引用以下道具：onEditClick（第8行），onDeleteClick（第12行）和person（各行）. That means when you render a `您需要通过所有这些道具，例如

<Person person={...} onEditClick={...} onDeleteClick={...} />

但是当在onEditClick组件的onDeleteClick函数中渲染<Person>时，就会丢失People和renderPersonTemplate。

您在onDeleteClick组件上定义了一个People函数，但是并没有神奇地传递到任何地方。您需要自己明确地执行此操作。另外，您需要在某个地方定义一个onEditClick函数，以便您也可以传递它。

class People {
   /* ... existing code ... */

  // Delete Button function
  onDeleteClick = myId => {
    console.log('deleting',myId);
  }

  // add this Edit Button function
  onEditClick = myId => {
    console.log('editing',myId);
  }

  renderPersonTemplate = person => {
    return <Person 
      key={person.id} 
      person={person} 
      onEditClick={this.onEditClick} // add this
      onDeleteClick={this.onDeleteClick} // add this
    />;
  }

  /* ... */
}

出现类型错误的原因是，您没有通过onDeleteClick传递任何<Person>，因此在Person函数内部，props.onDeleteClick为{{1 }}而不是您的代码所期望的功能。

TypeError：props.onDeleteClick不是函数

djxzh0 回答：TypeError：props.onDeleteClick不是函数

大家都在问