反应更新同级组件

Question

我对反应热更新组件感到困惑。

我有这样的东西：

const SingleEvent = ({ event }) => (
<>{event.status}</>
)
const EventDetails = ({ event, updateEvent }) => (
<button 
onClick={async () => {
const data = await getAPIResponse(); // { status: 'open' }
updateEvent(event.id, data)
}
>
Update
</button>
)
const List = ({ events, updateEvent, selectedEvent }) => {
if (selectedEvent) {
return <EventDetails event={selectedEvent} updateEvent={updateEvent} />
}
return (
<>
{events.map(event => <SingleEvent event={event}/>)}
</>
)
}
const Page = ({ initialEvents }) => {
const [events, setEvents] = useState(initialEvents || []);
const [selectedEvent, setSelectedEvent] = useState(null);
const updateEvent = (eventId, data) => {
setEvents(prevState => {
const eventIndex = prevState.findIndex(
element => element._id === eventId,
);
if (eventIndex === -1) {
return prevState;
}
prevState[eventIndex] = {
...prevState[eventIndex],
...data,
};
return prevState;
});
};
return <List events={events} updateEvent={updateEvent} selectedEvent={selectedEvent} />
}

在<EventDetails />组件中，我正在更新其中一个事件(基本上是更改其状态(。如果 API 工作正常，当我关闭详细信息(将 selectedEvent 设置为 null(时，一切都会正常变化。如果我在获得 API 响应之前关闭详细信息 - 没有任何变化。

我已经检查了updateEvent功能，它正在执行更新，但 UI 未刷新。

需要明确的是：

我打开<EventDetails />组件，按下按钮更新事件。API 应更改其状态。当我关闭事件详细信息时，我得到一个<SingleEvent />组件的列表。他们每个人都显示event.status.

如果我在收到响应之前关闭事件详细信息，则单个事件中的状态未更新。如果我等待响应，一切正常。

Answer 1

由于组件在获取数据之前被卸载，因此它不再能够更新响应。

您可以改为提供一个函数作为 props，用于执行 API 请求并更新状态

const EventDetails = ({ handleClick }) => (
<button 
onClick={handleClick}
>
Update
</button>
)
const List = ({ events, updateEvent, selectedEvent }) => {
const handleClick = async () => {
const data = await getAPIResponse(); // { status: 'open' }
updateEvent(event.id, data)
}
if (selectedEvent) {
return <EventDetails event={selectedEvent} updateEvent={updateEvent} handleClick={handleClick}/>
}
return (
<>
{events.map(event => <SingleEvent event={event}/>)}
</>
)
}

Answer 2

问题出在更新方法上。直接在prevState上运行不是一个好主意。更改updateEvent功能后，一切正常。

setEvents(prevState =>
prevState.map(event => {
if (event._id === eventId) {
return {
...event,
...updatedEvent,
};
}
return event;
})
);