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

Question

我有一个显示meeting详细信息的页面和一个编辑它的按钮。 该按钮打开一个模式，该模式将会议 object 传递给它，如下所示：

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

在 model 我有一个`useEffect`检查

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

当输入试图填充时，我得到的错误显然cannot read value __ of undefined因为在第一页上，会议没有立即加载，所以我怎么能在调用之前等待它被加载模态的。 我尝试过使用车削运算符，在上面的 if 语句中更具体，只是无法理解它。

此外，会议最初是通过 Redux 获取的，因此最初没有加载它。

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

模态组件的 useEffect

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

尝试使用仅在会议准备好时显示模式的Promise 。 如果您没有立即获得数据， async是 go 的最佳方式。