我正在创建一个网站以列出事件,并具有创建,更新和删除事件的能力。我在组件中使用了订阅道具来连接AWS应用程序同步,但更新无法正常工作。
当我订阅更改时,我将更新我的状态中的事件列表,然后显示该状态中的事件。 将为新事件显示一个组件,但不填充任何数据。 它立即出现,我想知道它是否不等待数据库填充它?
// /以及我要显示事件的地方
render(){
return(
<Connect id="connect"
subscription={graphqlOperation(subscriptions.onCreateEvent)}
onSubscriptionMsg={(prev, newEvent) => {
const events = [...this.state.events, newEvent]
this.setState({events:events});
return prev;
}
}
query={graphqlOperation(listEvents)}>
{({ data: { listEvents }, loading, error }) => {
if (error) return (<h3>Error</h3>);
if (loading || !listEvents) return (<h3>Loading...</h3>);
return (
<div id="eventloader">
{this.displayEvents()}
</div>
);
}}
</Connect>
);
}
//用于显示事件的功能
displayEvents () {
return this.state.events.map((event, i) => (
<Col md={4} key={i}>
<Event
openModal={this.openModal}
admin={false}
id={event.id}
title={event.name}
date={event.date}
description={event.description} />
</Col>
)
感谢您的帮助。