Javascript 阻止打开语义用户界面反应模式

在下面的示例中，打开模式会触发API调用以加载地址数据，然后该数据将显示在模式中。如果API调用失败（或什么也不返回），我希望阻止模态实际打开。我怎样才能做到这一点？到目前为止，我已经：

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

不幸的是，这实际上不起作用，模态仍然打开。理想情况下，我希望当模态打开但API调用失败时，它停止呈现子元素（即模态保持关闭）。我该怎么做？谢谢大家!

2020年1月28日更新

我发现了问题所在。设置状态将

ModalExample

的打开设置为false，而不是

Modal

。如何将其设置为模态？如果我在ModalExample级别复制

open

属性并将其传递给Modal，例如

---

然后，我还必须复制

Modal

中已经存在的所有打开/关闭处理逻辑。似乎是错误的方法

正如更新中提到的，问题是我只控制父组件中的open prop，但它没有链接到子组件（实际的语义ui）。我用以下方法解决了这个问题：

• 将

  open

  添加到父组件状态
• 将

  open

  prop传递给子组件（模态）
• 添加方法，以便在用户尝试关闭模式时更改父级

  open

  prop

这可能不是最好的解决方案，但对我来说很有效

上面的示例现在如下所示：

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

从“React”导入React；
从“语义ui反应”导入{按钮，模式}；
导出默认类ModalExample扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
地址:[{
房屋名称：“，
房号：“，
街道1号线，
街道2号线：，
镇：“，
邮政编码：“，
国家/地区名称：“，
}],
开：错，
}
}
获取地址（）{
fetch（'exampleurl'，{crossDomain:true，方法：'GET'，}）
.then（response=>response.json（））
。然后（地址=>{
如果（address.length>0）{
this.setState（{address}）
}else{//服务器响应为空
抛出新错误（“服务器未返回任何数据”）
}})
.catch（错误=>{
this.setState（{open:false}）
//找到停止渲染组件的方法
})
}
closeModal（）{
this.setState（{open:false}）//如果modal在modal中关闭，则更新父状态
}
渲染（）{
const address=此.state.address[0]
返回(
this.fetchAddress（）}
onClose={（）=>this.closeModal（）}
闭合图标
open={this.state.open}>
标题
...
);
}
}

对模式使用open={this.state.open}可能是正确的。打开/关闭处理逻辑是什么意思？模式有自己的

open

prop，当您关闭它时，它会变为false，但在本例中，我认为因为它是由父级控制的，所以不起作用，即当您尝试关闭它时，模式只是保持打开状态。不过我已经找到了一个解决方案，我现在就添加它。

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