Javascript 在React中的子组件中使用回调

我有一个呈现子组件列表的父组件：

renderMessages = (messages) => {
    let result = [];
    let key = 1;
    for(let i = 0; i < messages.length; i++){
        result.push(
            <Message key={key} 
                 onDeleteMessage={this.onDeleteMessage} 
                 message={messages[i]} 
             />
        );
        key++;
    }
    return result;
}

这是父组件-

onDeleteMessage

：

onOkDeleteMessage = () => {
    this.props.onDeleteMessage(this.props.message.id);
}

    onDeleteMessage = (id) => {
    axios.delete('url here', {
        data:{id: id}})
        .then(res => {
            if(typeof res.data === 'object'){
                const id = Number(res.data.id);
                // set new state

            }
        });
};

一切正常。问题在于如何关闭模式，但仅限于对服务器的删除请求成功时

我认为，一种方法是回调-

onDeleteMessage = (id)= (id, callback) => {
  //after success request
  callback();
}

在子组件中，调用

onDeleteMessage

：

onOkDeleteMessage = () => {
    this.props.onDeleteMessage(this.props.message.id, () => {
      // Change modal state
    });
}

，但我得到了以下错误：

未捕获（承诺中）类型错误：t不是函数

我不能像这样添加来自家长的其他道具：

 <Message key={key} 
        isModalVisible
 /> 

并且在父组件中使用state，在子组件中使用prop，因为所有modals都是打开的，但是有很多

Message

组件

如何以及哪一个是传递事件的好解决方案，从父级传递到子级

---

有办法使用回调吗？

只需将回调添加到onDeleteMessage即可

子组件：

onOkDeleteMessage = () => {
    this.props.onDeleteMessage(this.props.message.id, () => {

        // Change modal state
    });
}

父组件

onDeleteMessage = (id, cb) => {
    axios.delete('url here', {
        params:{id: id}})
        .then(res => {
            cb(); //this call to hide the model
        });
};

在

删除请求中

应使用

参数

而不是

数据

。 “数据”是作为请求正文发送的数据

仅适用于请求方法“PUT”、“POST”和“PATCH”

---

ref:

是的，但是我得到了这个错误：

Uncaught（在promise中）TypeError:t不是一个函数，对于父组件中的这一行
cb（）
。
onDeleteMessage = (id, cb) => {
    axios.delete('url here', {
        params:{id: id}})
        .then(res => {
            cb(); //this call to hide the model
        });
};