Javascript React |函数内的this.props.function将不会被调用

我正在使用React和MaterialUI制作一个清单，它由两个组件组成，一个包含数据，另一个编辑数据，但是出现了一个问题，即调用的函数（handleDeleteTechIP（））将无法执行，该函数是通过props传递的

父组件：

export default class CheckList extends React.Component {
constructor() {
    super();
    this.state = {
        taskData: {}
    }

 this.handleDeleteChip = this.handleDeleteChip.bind(this)


 handleDeleteChip = (chipToDelete) => () => {
    let obj = this.state.taskData
    delete obj[chipToDelete]
    this.setState({taskData: obj})
};

render() {
    return (
        <div>
            {
                <AddToDoComponent handleDeleteChip={this.handleDeleteChip}/>
            }
        </div>

class AddToDoComponent extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        chipData: props.taskData,
        updateCondition: true
    }
    this.deleteHandler = this.deleteHandler.bind(this)
}
deleteHandler(chipToDelete){
    this.props.handleDeleteChip(chipToDelete)
}

HandleDeleteTechIP的定义应为：

handleDeleteChip(chipToDelete) {
    let obj = this.state.taskData
    delete obj[chipToDelete]
    this.setState({taskData: obj})
};

或者如果您使用的是功能组件

const handleDeleteChip = (chipToDelete) => {
    ....
};

此外，不需要父渲染中的括号（{}）。

---

希望这对你有帮助

尝试从prop值绑定

此

export default class CheckList extends React.Component {
constructor() {
    super();
    this.state = {
        taskData: {}
    }

 //Remove: this.handleDeleteChip = this.handleDeleteChip.bind(this)


 handleDeleteChip = (chipToDelete) => () => {
    let obj = this.state.taskData
    delete obj[chipToDelete]
    this.setState({taskData: obj})
};

render() {
    return (
        <div>
            {
                <AddToDoComponent handleDeleteChip={this.handleDeleteChip.bind(this)}/>
            }
        </div>

导出默认类组件{
构造函数（）{
超级（）；
此.state={
任务数据：{}
}
//删除：this.handleDeleteChip=this.handleDeleteChip.bind（this）
HandleDeleteTechIP=（芯片删除）=>（）=>{
设obj=this.state.taskData
删除对象[chipToDelete]
this.setState（{taskData:obj}）
};
render（）{
返回(
{
}

您能演示一下如何在child中使用函数deleteHandler吗？您确定它没有被调用吗？在我看来，假设它被调用，它不会导致重新加载，因为您正在直接改变状态。@Arthur

const chip=（{Object.keys（this.state.chipData）。map（（k，i）=>（
{this.deleteHandler（{k}}/>
）}

谢谢，解决了这个问题。