防止打开 Semantic-ui React 模态

Question

在下面的示例中，打开模态框会触发 API 调用以加载地址数据，然后该数据会显示在模态框内。如果 API 调用失败（或 returns 什么都没有），我想阻止模式实际打开。我怎样才能做到这一点？到目前为止我有：

import React from 'react';
import { Button, Modal } from 'semantic-ui-react';

export default class ModalExample extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            address :[{
                house_name: "",
                house_number: "",
                street_line_1: "",
                street_line_2: "",
                town: "",
                postcode: "",
                country_name: "",
            }],
        }
    }

    fetchAddress () {
        fetch('exampleurl', {crossDomain:true, method:'GET',})
        .then(response => response.json())
        .then(address => {
            if (address.length > 0) {
                this.setState({address})
            } else {  //empty server response
                throw new Error("The sever returned no data.")
            }})
        .catch(error => {
            this.setState({open: false})
            // find a way to stop rendering of the component
        })
    }

    render () {
        const address = this.state.address[0]

        return (
            <Modal trigger={<Button>More Details...</Button>} onOpen={() => this.fetchAddress()} closeIcon>
                <Modal.Header>Heading</Modal.Header>
                <Modal.Content>
                    <Modal.Description>
                    ...
                    </Modal.Description>
                </Modal.Content>
            </Modal>
        );
    }
}

正如您从上面看到的，我试图通过捕获错误来阻止模式打开

.catch(error => {
            this.setState({open: false})
            // find a way to stop rendering of the component
        })

不幸的是，这实际上不起作用，模式仍然打开。理想情况下，我希望当模式打开但 API 调用失败时，它只是停止渲染子元素（即模式保持关闭）。我怎样才能做到这一点？谢谢！

2020 年 1 月 28 日更新

我找到问题了。 setState 将 ModalExample 而非 Modal 的 open 设置为 false。我怎样才能将它设置为模态？如果我在 ModalExample 级别复制 open 属性并将其传递给 Modal，例如

<Modal [...] open={this.state.open}>

然后我还必须复制 Modal 中已经存在的所有 open/close 处理逻辑。似乎是错误的方法。

Answer 1

如更新中所述，问题是我只控制了父组件中的 open 属性，但它没有链接到子组件（实际的语义-ui-react 模态).我已经通过以下方式解决了这个问题：

将open添加到父组件状态
将 open 属性传递给子组件（模态）
添加方法以在用户尝试关闭模式时更改父 open 属性

这可能不是最好的解决方案，但它对我有用。

上面的例子现在看起来像这样：

import React from 'react';
import { Button, Modal } from 'semantic-ui-react';

export default class ModalExample extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            address :[{
                house_name: "",
                house_number: "",
                street_line_1: "",
                street_line_2: "",
                town: "",
                postcode: "",
                country_name: "",
            }],
            open: false,
        }
    }

    fetchAddress () {
        fetch('exampleurl', {crossDomain:true, method:'GET',})
        .then(response => response.json())
        .then(address => {
            if (address.length > 0) {
                this.setState({address})
            } else {  //empty server response
                throw new Error("The sever returned no data.")
            }})
        .catch(error => {
            this.setState({open: false})
            // find a way to stop rendering of the component
        })
    }

    closeModal () {
        this.setState({open:false})  // If modal was closed inside the modal, update the parent state
    }

    render () {
        const address = this.state.address[0]

        return (
            <Modal trigger={<Button>More Details...</Button>} 
                   onOpen={() => this.fetchAddress()}
                   onClose={() => this.closeModal()}
                   closeIcon
                   open={this.state.open}>
                <Modal.Header>Heading</Modal.Header>
                <Modal.Content>
                    <Modal.Description>
                    ...
                    </Modal.Description>
                </Modal.Content>
            </Modal>
        );
    }
}

防止打开 Semantic-ui React 模态

Prevent Semantic-ui React modal from opening

javascript

reactjs

semantic-ui-react