React条件渲染没有给出预期的值(它不工作)

Question

如果数组长度为>如果数组长度等于0，则需要显示按钮(没有禁用)

我尝试了这样的条件渲染。

{this.state.aboutus.map((item) => (
(this.state.aboutus.length > 0 ?
<button type="button" className="btn btn-info" style={{ float: 'right', padding: '12px 28px', marginBottom: '30px' }} disabled={true}>
<PlusLg /> Add About Us Details
</button>
:
<button type="button" className="btn btn-info" style={{ float: 'right', padding: '12px 28px', marginBottom: '30px' }} onClick={() => { window.location.href = APP_ROUTES.ADMIN_ADD_ABOUT_US }}>
<PlusLg /> Add About Us Details
</button>
)
))}

如果this.state.about . length为>我想禁用按钮，否则它不需要禁用。但是当我使用这个代码，即使在数据库中没有数据是不显示按钮。但是如果有一个数据，但是被禁用。

我不知道这个编码有什么问题。请帮助。

Answer 1

在此函数中，

(item) => (
(this.state.aboutus.length > 0 ?
<button type="button" className="btn btn-info" style={{ float: 'right', padding: '12px 28px', marginBottom: '30px' }} disabled={true}>
<PlusLg /> Add About Us Details
</button>
:
<button type="button" className="btn btn-info" style={{ float: 'right', padding: '12px 28px', marginBottom: '30px' }} onClick={() => { window.location.href = APP_ROUTES.ADMIN_ADD_ABOUT_US }}>
<PlusLg /> Add About Us Details
</button>
)

没有对项的引用，所以不需要使用map:

当数组为空时，map永远不会运行，所以你的按钮永远不会呈现。

要解决这个问题，只需省略map:

<div>{
(this.state.aboutus.length > 0 ?
<button type="button" className="btn btn-info" style={{ float: 'right', padding: '12px 28px', marginBottom: '30px' }} disabled={true}>
<PlusLg /> Add About Us Details
</button>
:
<button type="button" className="btn btn-info" style={{ float: 'right', padding: '12px 28px', marginBottom: '30px' }} onClick={() => { window.location.href = APP_ROUTES.ADMIN_ADD_ABOUT_US }}>
<PlusLg /> Add About Us Details
</button>
)
}</div>

Answer 2

好吧，你不需要使用map。

你可以照做。

<button type="button" className="btn btn-info" style={{ float: 'right', padding: '12px 28px', marginBottom: '30px' }} disabled={this.state.aboutus.length}>
<PlusLg /> Add About Us Details
</button>