Question

我正在实施一个通知，其中每10秒我进行一次api调用，并根据收到的响应显示通知警报。我在这里面临的问题是div没有得到渲染。我正在基于map函数中的某些条件显示div。在这里，数据是对象数组，作为api调用的响应，由于某些原因，我看到else部分从未执行过，并且总是得到if块中提到的div。我不确定自己在做什么错。 item.description值将根据登录的用户而有所不同。

getNotificationDetails = (data) =>{ 
    const payloadData = data.payLoad && data.payLoad.map(item => {
                if (item.description == generatedStatus){
                    return 
                    (
                        <div key = {item.id} className="alert alert-warning alert-dismissible show" role="alert">
                              You have received notification
                            <Link  to='/validated'> {item.extendedAccessKey} </Link>
                            <button type="button" className="close" data-dismiss="alert" aria-label="Close" onClick={this.updateNotification}>
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>  
                    )
                } else {
                    return 
                    (
                        <div key = {item.id} className="alert alert-warning alert-dismissible show" role="alert">
                              Your detail has been shared with
                            <Link to='/validated'> {item.extendedAccessKey} </Link>
                            <button type="button" className="close" data-dismiss="alert" aria-label="Close" onClick={this.updateNotification}>
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>  
                    )
                }
            })
            return payloadData;
            console.log(payloadData);

        }
render() { 
        const data = this.props.getNotificationStatus;
        console.log(data);
        console.log(data.payLoad);
        const isAccessKeyLinked = Object.keys((data.length === 0))

        return (  
            <div className="notification-alert">
                    {
                        (!isAccessKeyLinked)
                        ?
                        (this.state.isActive  && this.getNotificationDetails(data))
                        :
                        (this.state.isActive  && this.getNotificationDetails(data))
                    }


            </div>
        );
    }

Answer 1

getNotificationDetails是一个功能组件，它将返回一个视图。

此(this.state.isActive && this.getNotificationDetails(data))无效，因为一个是布尔值，另一个是视图。

在返回语句后调用console.log(payloadData);。

React JS- else块未在Map函数内部执行

1 个答案: