在 React 的子组件中使用回调

Question

我有一个渲染子组件列表的父组件：

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

消息组件（渲染方法的一部分）：

<Modal
    visible={this.state.isVisible}
    onOk={this.onOkDeleteMessage}
    onCancel={this.onCancelDeleteMessage}
    destroyOnClose={true}
>
    <p>Delete Message</p>
</Modal>

在'Message'子组件中，有'Delete'按钮，点击打开模态框。 当按下“确定”按钮时，onOkDeleteMessage 会执行并调用父级“onDeleteMessage”。

子组件Message - onOkDeleteMessage：

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

这是父组件 - onDeleteMessage:

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

，但我收到此错误：

Uncaught (in promise) TypeError: t is not a function

我不能像这样从父级添加另一个道具：

 <Message key={key} 
        isModalVisible
 /> 

并在父组件中使用状态和子组件的道具，因为所有模态都会打开，但是Message组件很多。

从父级到子级如何以及哪个是完成该事件的好解决方案？

有没有办法使用回调？

Answer 1

只需将回调添加到 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
        });
};

在delete request 中，您应该使用params 而不是data。 “data”是要作为请求体发送的数据Only applicable for request methods 'PUT', 'POST', and 'PATCH'

参考：https://github.com/axios/axios/issues/736