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.aboutus.lenght 大于 0，我想禁用按钮，否则不需要禁用。但是当我使用这段代码时，即使数据库中没有数据也没有显示按钮。但是如果有一个数据却被禁用了。

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

Answer 1

嗯，你不需要为此使用地图。

您只需按照以下操作即可。

<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>

Answer 2

在这个函数中，

(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>
                    )

没有对 item 的引用，所以你不需要使用 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>

React 条件渲染没有给出预期值（它不起作用）

React conditional rendering is not giving the expected value (it is not working)

reactjs

conditional-rendering