Question

我很清楚我们不应该在render方法中设置setState，因为它会导致无限循环。

我在具有编辑表单的应用程序中显示Modal。提交表单后，加载状态会以模式方式显示，并且以相同的方式显示错误。但是，如果一切正常，并且从服务器返回了一些数据，我想隐藏模态。如何进行这项工作？

代码。

//Function to close the modal.
closeEditModal = () => this.setState({openEditModal: false});

render() {
    const {openEditModal, formTitle, categoryId} = this.state;

    return <Mutation
        mutation={EDIT_CATEGORY}>
        {(mutate, {called, loading, error, data}) => {

            //Close modal after successful mutation
            if (data) this.closeEditModal(); //THIS CAUSE ERROR WHEN DATA IS RETURNED.

            return <Modal size='tiny' open={openEditModal} onClose={this.closeEditModal}>
                <Modal.Header>Edit Form</Modal.Header>
                {error ? <Modal.Content>{error}</Modal.Content> : null}
                <Modal.Content>
                    <Form onSubmit={e => {
                        e.preventDefault();
                        mutate({variables: {categoryId: categoryId, input: {title: formTitle}}})
                    }} loading={loading} >
                        {/*FORM INPUTS HERE*/}
                    </Form>
                </Modal.Content>
            </Modal>;
        }}
    </Mutation>
}

注意：我正在使用apollo客户端提交数据。

Answer 1

您需要修改条件，因为一旦有了数据，它将循环调用closeEditModel，这将引发此错误：

已超过最大更新深度

使用此条件并仅调用一次closeEditModel方法：

if (data && this.state.openEditModal)
  this.closeEditModal();

Answer 2

请尝试将功能主体围起来。

closeEditModal = () => { this.setState({openEditModal: false}); }

超过最大更新深度做出反应

2 个答案: