Javascript 我能通过吗；“尚未创建状态”；作为setState挂钩内组件中的支柱？

父组件：

export default function GeneralModal({
  modalOpen,
  setModalOpen,
  type,
  idLocation,
}) {

  const materialClasses = useStyles();
  const [open, setOpen] = useState(false);
  const [title, setTitle] = useState('')
  const [loading, setLoading] = useState(false)
  const [modalType, setModalType] = useState()
  const [idBooking, setIdBooking] = useState('')
  const [modalDetails, setModalDetails] = useState({})
  const [isConfirmationModalOpen, setIsConfirmationModalOpen] = useState(false)

  useEffect(()=> {
    setModalType(type)
    setTitle(type)
  }, [type])

  const handleClose = () => {
    setOpen(false);
    setModalOpen ? setModalOpen(false) : null
  };

  useEffect(()=> {
    switch(modalType) {
      case 'bookingDetails':
        setModalDetails({
          body: <BookingDetailsBody
                  idLocation={idLocation}
                  setModalDetails={setModalDetails}
                  modalDetails={modalDetails}
                  setModalType={setModalType}
                  setIdBooking={setIdBooking}
                  loading={loading}
                  setLoading={setLoading}
                  setTitle={setTitle}
                />,
          title: '',
          classe: materialClasses.bookingModalContainer,
          header: true
        })
        break;
      case 'addBooking':
      case 'editBooking':
        setModalDetails({
          body: <BookingFormBody
                  type={modalType === 'editBooking' ? modalType :  type}
                  setIsConfirmationModalOpen={setIsConfirmationModalOpen}
                  idLocation={idLocation}
                  close={handleClose}
                  loading={loading}
                  setLoading={setLoading}
                  setModalType={setModalType}
                />,
          title: modalType === 'editBooking' ? 'MODIFIER LOCATION' : 'NOUVELLE LOCATION',
          classe: materialClasses.bookingModalContainer,
          header: true
        })
        break;
      case 'confirmationModal':
        setModalDetails({
          body: <ConfirmationModalBody />,
          title: '',
          classe:  materialClasses.confirmationModalContainer,
          header: false
        })
        break;
      default: ''
    }
  }, [modalType])

const BookingDetailsBody = ({idLocation, setIdBooking, setLoading, modalDetails, setModalDetails, setTitle}) => {

    const [data, setData] = useState({
        secondaryDrivers: [],
        optionsWithNoDuplicates :[],
    })
    const [bookingDetails, setBookingDetails] = useState('')
 
    useEffect( () => {

        setLoading(true)
        
                
                setIdBooking(data.data.external_booking.id)
                console.log(modalDetails) // empty object {}
                setModalDetails({
                ...modalDetails,
                title: 'LOCATION EXTERNE'
                 })
                setTitle('Location externe')
                setBookingDetails(data)
                setLoading(false)
         
    }, [] )

在子组件中，我想通过作为道具传递的“setModalDetails”更新我的

modalDetails

对象的标题键，但由于我正在分解空的modalDetails，这会使我的应用程序崩溃。 找不到只能从子组件更改我的标题键的解决方法。 我找到的唯一解决方案是使用与新挂钩相关的标题道具，但我宁愿将所有信息保留在我的

modalDetail

hook中，以获得清晰的代码。 有什么想法吗