Question

我正在渲染一个列表，我想显示一条未加载数据的信息。

这是我的代码：

<div className="dashboard-table dashboard-table-done">
           <div className="dashboard-table-title dashboard-table-title-done">Chamadas encerradas</div>
                    { this.state.data && this.state.data.map(attendInfo =>
                        attendInfo.close && (
                            <DashboardAttend {...attendInfo} />
                        )

                    )}

如果参与信息，则会呈现<DashboardAttend>

如果没有人被渲染，我想渲染一条消息，说明没有一个数据呈现如下：

<div>No one data was found</div>

我无法使用this.state.data，因为字段关闭可以为null，长度可以高于0

Answer 1

我认为你问的是如果state.data为空或者不包含任何元素，那么你想写：

<div>No one data was found</div>

您可以通过简单地在末尾添加另一位来完成此操作：

{ (!state.data || !state.data.length) && <div>No one data was found</div> }

所以在位置上看起来像是：

<div className="dashboard-table dashboard-table-done">
           <div className="dashboard-table-title dashboard-table-title-done">Chamadas encerradas</div>
                    { this.state.data && this.state.data.map(attendInfo =>
                        attendInfo.close && (
                            <DashboardAttend {...attendInfo} />
                        )

                    )}
                    { (!state.data || !state.data.length) && <div>No one data was found</div> }

Answer 2

这样的事情

render(){
    const dataForRender = this.state.data? this.state.data.filter((attendInfo) => {
       return attendInfo.close;
    }): [];

    return (
         <div className="dashboard-table dashboard-table-done">
             <div className="dashboard-table-title dashboard-table-title-done">
                 Chamadas encerradas
             </div>
             { 
                dataForRender.length>0 ? dataForRender.map(attendInfo =>
                  (
                          <DashboardAttend {...attendInfo} />
                  )
                ): <div>No one data was found</div>
             }
         </div>
    );
}

如果循环为空，则反应渲染div

2 个答案: