arrays - 使用上下文 api 时没有渲染

Question

return (
            <div className="container-fluid" style={{ marginTop: '72px' }}>
                {/* {button}
                <div className="Cards">{successCards}</div>
                <Modal show={this.state.calendar} modalClosed={this.closeCalendar}>
                    {showCalendar}
                </Modal> */}
                <CalenderContext.Consumer>
                    {context=>{
                        if(context.result.length){
                            context.result.map((successCard) => {
                                return (
                                    <Card
                                        key={successCard.fileName}
                                        image={successCard.imageUrl}
                                        payerName={successCard.result.payer.payerName}
                                        subscriberName={successCard.result.subscriberName.subscriberName}
                                        subscriberId={successCard.result.subscriberId.subscriberName}
                                    />
                                );
                            });
                        }
                    }}
                </CalenderContext.Consumer>
            </div>
        );

我以数组的形式正确获取上下文。一切都很好，但没有渲染。任何人都可以帮助解决问题。

标签： arraysreactjsreact-hooksrender

Answer 1

通过使用反应片段解决了这个问题。

<CalenderContext.Consumer>
                    {context=>(
                        <Fragment>
                            {context.result.map((successCard) => {
                                return (
                                    <Card
                                        key={successCard.fileName}
                                        image={successCard.imageUrl}
                                        payerName={successCard.result.payer.payerName}
                                        subscriberName={successCard.result.subscriberName.subscriberName}
                                        subscriberId={successCard.result.subscriberId.subscriberName}
                                    />
                                );
                            })}
                        </Fragment>
                    )}
                </CalenderContext.Consumer>

谢谢。