GraphQL订阅未在React中正确更新

时间:2019-06-08 17:15:50

标签: reactjs graphql aws-amplify

我正在创建一个网站以列出事件,并具有创建,更新和删除事件的能力。我在组件中使用了订阅道具来连接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>
            )

感谢您的帮助。

0 个答案:

没有答案