React 网络应用程序：'Hide' 个 table 元素，因此不显示值为零的元素

Question

我创建了一个教育应用程序来列出在线商店的产品。我为这些产品创建了 table，但我想隐藏那些数量为运行的产品（即，在 quantity=0 时隐藏整行）。

我使用 array.map:

从状态中的数组创建 table

<table className="center-table" style={{border:'solid',}}>
      <thead className="has-text-black-bis" style={{backgroundColor:"#e6be8a"}}>
        <tr>
          <th >Product Name:</th>
          <th >Unit Price:</th>
          <th >Quantity Available:</th>
          <th >Buy!</th>
        </tr>
      </thead>
      <tbody className="has-text-black-bis">
        {this.state.indices.map((a) => (
          <tr className="rows">
            <td ><strong>{this.state.itemNames[a]}</strong></td>
            <td ><strong>{this.state.costs[a]} Wei</strong></td>
            <td ><strong>{this.state.quantities[a]}</strong></td>
            <td >
              Qty: <input type="text" className='table-input' name="inputs" value={this.state.inputs[a]} onChange={this.handleInputChange} />
              <button type="button" className='buy-btn' onClick={()=>this.buyItem(a)}> Buy!</button>
            </td>
          </tr>
        ))}
      </tbody>
    </table>

我认为 for 循环会工作得很好，但我无法在 JSX 中实现它。

Answer 1

只需在map方法前添加一个过滤器即可：

this.state.indices.filter((a) => a.quantity !== 0).map((a) => (...

你也可以去

this.state.indices.filter((a) => a.quantity).map((a) => (...

因为 0 在 JS 中被认为是 falsy。

React 网络应用程序：'Hide' 个 table 元素，因此不显示值为零的元素

React web app: 'Hide' elements of a table so those with value of zero are not shown

javascript

jsx

reactjs