React - 传递给子组件时道具的值未准备好

Question

I have a page that displays the details of a meeting and a button to edit it. The button opens up a modal that has the meeting object passed to it like so:

<AddMeetingModal
    show={isEditing}
    cancel={closeEditModal}
    edit={meeting}
/>

and in the model I have a `useEffect``which checks

useEffect(() => {
        if(props.edit) {
            //Fill input fields with values from meeting object
        } else {
            //Set all fields to blank for adding a new meeting
        }
    }, [props])

The error I'm getting comes when the inputs are trying to be filled cannot read value __ of undefined obviously because on the first page, the meeting isn't loaded right away, so how can I wait for it to be loaded before calling the modal. I've tried using turnery operators, being more specific in the if statement above and just can't wrap my head around it.

Also the meeting initially is being fetched via Redux hence why it isn't loaded intially.

const meetingDetails = useSelector(state => state.meetingDetails)
const { loading, error, meeting } = meetingDetails

useEffect for Modal component

useEffect(() => {
        if(!!props.edit) {
            setMeetingHeld(props.edit.meeting_held)
            setMeetingType(props.edit.meeting_type)
            setAdd1(props.edit.location.address_line_1)
            setAdd2(props.edit.location.address_line_2)
            setAdd3(props.edit.location.address_line_3)
            setTownCity(props.edit.location.town_city)
            setCountyState(props.edit.location.county_state)
            setPostCode(props.edit.location.post_code)
            setCountry(props.edit.location.country)
            setTime(props.edit.meeting_time)
            setHeldWith(props.edit.held_with)
            setDetails(props.edit.details)
            setExistingConnector(props.edit.existing_connector)
            setConnectorComments(props.edit.connector_comments)
            setCompetitor(props.edit.competitor)
            setMeetingReason(props.edit.meeting_reason)
            setFollowUpActions(props.edit.follow_up_actions)
            setFollowUpDate(props.edit.follow_up_date)
        } else {
            setMeetingHeld('scheduled')
            setMeetingType('in_person')
            setAdd1('')
            setAdd2('')
            setAdd3('')
            setTownCity('')
            setCountyState('')
            setPostCode('')
            setCountry('')
            setTime('')
            setHeldWith('')
            setDetails('')
            setExistingConnector(false)
            setConnectorComments('')
            setCompetitor('')
            setMeetingReason('')
            setFollowUpActions('')
            setFollowUpDate('')
        }
    }, [props])

Answer 1

Try using a Promise that only shows the modal when the meeting is ready. If you don't have the data right away, async is the best way to go about this.