如何用按钮隐藏具有特定值的数据行？

Question

我用react-bootstrap-table-next。并想使用一个切换按钮来隐藏或显示具有特定值的行。但问题是 table 内容没有改变。

import BootstrapTable from 'react-bootstrap-table-next';

const products = [
  {id: 0, name: 'item 0', price: 4},
  {id: 1, name: 'item 1', price: 5},
  {id: 2, name: 'item 2', price: 3},
  {id: 3, name: 'item 3', price: 5},
]

const columns = [{
  dataField: 'id',
  text: 'Product ID'
}, {
  dataField: 'name',
  text: 'Product Name',
}, {
  dataField: 'price',
  text: 'Product Price',
}];

const handleClick = () => {
  for (i=0; i> products.length; i++) {
    if (products[i]["price"] === 5) {
      products.slice(i, 1);
    }
  }
};

export default () => (
  <div>
    <button className="btn btn-lg btn-primary" onClick={ handleClick }>hide data </button>

    <BootstrapTable keyField='id' data={ products } columns={ columns } />
  </div>
);

Answer 1

问题是您正在尝试更新产品，但在每个 re-render 上，它都会重置为初始值（因为它是在组件函数之外定义的)。所以，产品的价值永远是一样的。

一种解决方案是将 products 移动到组件内部并为其创建一个状态。

您可以像这样重塑您的代码：

import BootstrapTable from 'react-bootstrap-table-next';
import { useState } from 'react';

const columns = [{
    dataField: 'id',
    text: 'Product ID'
}, {
    dataField: 'name',
    text: 'Product Name',
}, {
    dataField: 'price',
    text: 'Product Price',
}];

const MyComponent = () => {
    const [products, setProducts] = useState([
        { id: 0, name: 'item 0', price: 4 },
        { id: 1, name: 'item 1', price: 5 },
        { id: 2, name: 'item 2', price: 3 },
        { id: 3, name: 'item 3', price: 5 },
    ]);

    const handleClick = () => {
        let temp = products;
        for (i = 0; i > temp.length; i++) {
            if (temp[i]["price"] === 5) {
                temp.slice(i, 1);
            }
        };

        setProducts(temp);
    };

    return (
        < div >
            <button className="btn btn-lg btn-primary" onClick={handleClick}>hide data </button>

            <BootstrapTable keyField='id' data={products} columns={columns} />
        </div >
    )
};

export default MyComponent;

如何用按钮隐藏具有特定值的数据行？

How to hide data rows with certain value with a button?

reactjs

react-bootstrap-table