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

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

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

在“消息”子组件中，有“删除”按钮，单击该按钮可打开模式。当按下“确定”按钮时，将执行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
    });
}

，但出现此错误：

未捕获（承诺）TypeError：t不是函数

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

 <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。 “数据”是要作为请求正文发送的数据Only applicable for request methods 'PUT', 'POST', and 'PATCH'

ref：https://github.com/axios/axios/issues/736

在React

1 个答案: