Redux 状态更改不会重新渲染数据表答案

【问题标题】：Redux state change does not rerenders datatableRedux 状态更改不会重新渲染数据表
【发布时间】：2020-02-24 04:36:54
【问题描述】：

**这里是购物车的导入和状态

const Cart = ({ cart, setActiveTab, removeFromCart, updateQuantity }) => {
const [selectedRows , setSelectedRows] = useState([]);
const [toggleCleared, setToggleCleared] = useState(false);
const [products, setProducts] = useState(cart.products) }    


 const columns = [
    {
      name: 'Product Name',
      selector: 'name',
      sortable: true,
    },
    {
      name: 'Product Price',
      selector: 'price',
      sortable: true,
      right: true,
    },
    {
        name: 'Product Quantity',
        selector: 'quantity',
        sortable: true,
        right: true,
        cell: row => <Fragment><input type="number" className="form-control" value={row.quantity} onChange = {(e)=>updateQuantity( row.id,strong text e.target.value)}/></Fragment>
      },
      {
        name: 'Subtotal',
        selector: 'quantity',
        sortable: true,
        right: true,
        cell: row => <Fragment>{row.quantity * row.price}</Fragment>
      },
      {
        name: 'Actions',
        selector: 'quantity',
        sortable: true,
        right: true,
        cell: row => <Fragment><i className="fa fa-trash" aria-hidden="true" onClick = {(e)=>removeFromCart(row.id)}></i></Fragment>
      },
  ];
  const contextActions = useMemo(() => {
    const handleDelete = () => {


        selectedRows.forEach(item=>{
            console.log(item, 'item')
            removeFromCart(products, products.indexOf(item))
        });

        setProducts(products);
        setToggleCleared(!toggleCleared);
        console.log('handleDelete', products)
    };

    return <i className="fa fa-trash" key="delete" onClick={handleDelete} style={{ backgroundColor: 'red' }} ></i>;
  });

此代码在我们选择行时设置选定的行

function rowSelection (rows) =>{
  setSelectedRows(rows.selectedRows);
}



  return (     <DataTable
                        title="Cart Products"
                        columns={columns}
                        data={products}
                        selectableRows
                        onSelectedRowsChange={rowSelection}
                        clearSelectedRows={toggleCleared}
                        contextActions={contextActions} />

)

**这里是我的购物车组件，它工作正常，但当 redux 状态发生变化时它不会自行更新。我可以在控制台中看到 redux 状态它完全改变但数据表不会重新呈现

【问题讨论】：

我认为这里缺少相关信息。就像setSelectedRows 所指的那样，或者您如何将数据表连接到商店
const Cart = ({ cart, setActiveTab, removeFromCart, updateQuantity }) => { const [selectedRows, setSelectedRows] = useState([]);常量 [toggleCleared, setToggleCleared] = useState(false); const [products, setProducts] = useState(cart.products) const Cart = ({ cart, setActiveTab, removeFromCart, updateQuantity }) => { const [selectedRows, setSelectedRows] = useState([]);常量 [toggleCleared, setToggleCleared] = useState(false); const [products, setProducts] = useState(cart.products)
我已添加完整代码，请检查
removeFromCart(products, products.indexOf(item)) - 你在这个函数里做什么
我正在从产品数组中删除一个产品。它从产品中删除，但视图不会重新呈现

标签： reactjs react-data-table-component

【解决方案1】：

const [products, setProducts] = useState(cart.products) } 这仅适用于初始渲染（称为 initial state）。一旦渲染完成，useState 将不会调用。所以只需将 cart.products 传递给数据表

function rowSelection (rows) =>{
  setSelectedRows(rows.selectedRows);
}



  return (     <DataTable
                        title="Cart Products"
                        columns={columns}
                        data={cart.products}  
                        selectableRows 
                        onSelectedRowsChange={rowSelection}
                        clearSelectedRows={toggleCleared}
                        contextActions={contextActions} /> )

【讨论】：