我是新来的反应者，当我的可用汽车部件中的道具值发生变化时，我得到了这个错误，这是Home Component的子组件.props值发生变化时出现了此错误（我从其父组件获取了props）第一次工作正常，但在更换道具时却没有。请帮助我。完整的错误是“ DOMException：无法在“节点”上执行“ removeChild”：要删除的节点不是该节点的子节点。”
<div>
{props.myData ? (
<section className="cars">
<div className="container ">
<div className="col-md-12 p-0">
<h2 className="bb">
Available Cars{' '}
<span className="count">
{vehiclesCount}
<span />
</span>
</h2>
</div>
</div>
<div className="container">
<div className="row">
<div className="col-md-12">
<div className="viewmap">
<div className="input-group">
<div className="fromdes">
<div className="values">
<p>
Values based on route
<br /> to selected destination:
</p>
</div>
<div className="from">
<i className="fas fa-plane-departure" />
<div className>
<label>From</label>
{!props.myData.switched &&
!props.myData.isAdvanced ? (
<p>{props.myData.From}</p>
) : props.myData.switched &&
!props.myData.isAdvanced ? (
<p>{props.myData.dropDownDestinationText}</p>
) : !props.myData.switched &&
props.myData.isAdvanced ? (
<p>{props.myData.From}</p>
) : props.myData.switched &&
props.myData.isAdvanced ? (
<p>{props.myData.destination_address}</p>
) : null}
</div>
</div>
<div className="des">
<i className="fas fa-map-marker-alt" />
<div className>
<label>Destination</label>
{!props.myData.switched &&
!props.myData.isAdvanced ? (
<p>{props.myData.dropDownDestinationText}</p>
) : props.myData.switched &&
!props.myData.isAdvanced ? (
<p>{props.myData.From}</p>
) : !props.myData.switched &&
props.myData.isAdvanced ? (
<p>{props.myData.destination_address}</p>
) : props.myData.switched &&
props.myData.isAdvanced ? (
<p>{props.myData.From}</p>
) : null}
</div>
</div>
</div>
<div className="input-group-append">
<button
className="btn btn-outline-secondary"
onClick={openModal}
type="button"
>
<i className="far fa-map" /> View Map
</button>
<div>
<Modal
isOpen={modalIsOpen}
onAfterOpen={afterOpenModal}
onRequestClose={closeModal}
style={customStyles}
contentLabel="Map Modal"
>
<h2
className="mb-4"
ref={_subtitle => (subtitle = _subtitle)}
>
Map
</h2>
{typeof props.myData.Destination === 'string' ? (
<React.Fragment>
<ReactGMap
containerElement={
<div
style={{ height: `100%`, width: '100%' }}
/>
}
mapElement={<div style={{ height: `100%` }} />}
isMarkerShown
origin={props.myData.apLatLong}
destination={props.myData.destLatLng}
/>
</React.Fragment>
) : (
<React.Fragment>
<ReactGMap
containerElement={
<div
style={{ height: `100%`, width: '100%' }}
/>
}
mapElement={<div style={{ height: `100%` }} />}
isMarkerShown
origin={props.myData.apLatLong}
destination={props.myData.Destination}
/>
</React.Fragment>
)}
</Modal>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className>
<div className="container max1080">
<div className="row">
<div className="col-md-12">
{availableCars && availableCars.length > 0 ? (
<div className="owl-carousel owl-theme carslider">
{!noResultVehicles &&
availableCars &&
availableCars.length > 0
? availableCars.map((item, index) => (
<div className="item" key={index}>
<div className="carbox">
<div className="bluebg" />
<img src={car1Img} alt="cars" />
<div className="choosedesc">
<h4>{item.vehicle_name}</h4>
<p className="grey">
Max Passengers:{' '}
<span className="blue">{item.max_pax}</span>
</p>
<p className="grey">
Max Luggage:{' '}
<span className="blue">
{item.max_luggage}
</span>
</p>
<p className="grey">
CXL Deadline:{' '}
<span className="blue">
{item.cxl_days}
</span>
</p>
</div>
<div>
<div className="selecttrip">
{!roundTrip || !oneWayTrip ? (
<p>{selectTripTypeError}</p>
) : null}
<label className="radiowrap">
Round Trip{' '}
<span className="blue">
{item.rt_price}
{item.currency == 'EUR' ? '€' : '$'}
</span>
<input
type="radio"
value={item.rt_price}
checked={roundTrip === item.vehicle_id}
onChange={e =>
onRoundTripChecked(
item.rt_price,
item.vehicle_id,
item.currency,
item.seconds_before_pick,
item.max_pax,
item.release_hours,
)
}
name="radio"
/>
<span className="checkmark" />
</label>
<label className="radiowrap">
One Way{' '}
<span className="blue">
{item.ow_price}
{item.currency == 'EUR' ? '€' : '$'}
</span>
<input
type="radio"
checked={oneWayTrip === item.vehicle_id}
value={item.ow_price}
onChange={e =>
onOneWayChecked(
item.ow_price,
item.vehicle_id,
item.currency,
item.seconds_before_pick,
item.max_pax,
item.release_hours,
)
}
name="radio"
/>
<span className="checkmark" />
</label>
</div>
<div className="booknow">
<button
type="button"
name="button"
className="btn btnstyle4 btn-block "
onClick={() => goToBookingForm(item)}
>
Book Now
</button>
</div>
</div>
</div>
</div>
))
: noResultVehicles}
</div>
) : (
<LoadingOverlay
styles={{
overlay: {
position: 'absolute',
height: '100%',
width: '100%',
top: '0px',
left: '0px',
display: '-webkit - box',
display: '-webkit - flex',
display: '-ms - flexbox',
display: 'flex',
'text-align': 'center',
'font-size': '1.2em',
color: '#000',
background: 'rgba(0, 0, 0, 0)',
zIndex: 800,
opacity: 1,
},
}}
active={isActive}
spinner
spinner={<HashLoader size={120} color={'#3C84BB'} />}
/>
)}
</div>
</div>
</div>
</div>
</section>
) : null}
</div>