防止打开 Semantic-ui React 模态

Question

In the below example, opening the modal triggers an API call to load address data that then gets displayed inside the modal. If the API call fails (or returns nothing) I want to prevent the modal from actually opening. How can I achieve this? So far I've got:

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

As you can see from the above I've tried to prevent the modal from opening by catching the error

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

Unfortunately this doesn't actually work, the modal still opens. Ideally I want that when the modal gets opened but the API call fails it just stops rendering the child elements (ie the modal stays closed). How can I do this? Thank you!

Update 28 Jan 2020

I've found the issue. setState sets open to false for ModalExample instead of Modal . How can I set it for Modal instead? If I duplicate the open property at the ModalExample level and pass it to Modal, eg

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

then I also have to duplicate all the open/close handling logic that already exists in Modal . Seems like the wrong approach.

Answer 1

As mentioned in the update, the problem was that I was only controlling the open prop in the parent component but it wasn't linked up to the child component (the actual semantic-ui-react modal). I've solved this in the following way:

• add open to parent component state
• pass open prop to the child component (modal)
• add method to change the parent open prop whenever the user tries to close the modal

This may not be the best solution but it worked for me.

The example above now looks like this:

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