reactjs - Redux 状态更改不会重新渲染数据表
问题描述
**这是购物车进口和状态
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 状态它完全改变但数据表不会重新呈现
解决方案
const [products, setProducts] = useState(cart.products) } 这仅适用于初始渲染(称为初始状态)。一旦渲染完成,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} /> )
推荐阅读
- mongodb - 从 set mongodb 中的查找中删除项目的字段
- python - 芹菜如何将处理结果列表传递给另一个任务?
- intellij-idea - 如何仅将 WebStorm FileWatcher 用于当前文件
- python - yFinance:.download / .history 函数只提供从下午 1 点到晚上 7 点的数据(Python)
- swift - 解析大型 Firebase 快照
- javascript - Firestore 慢查询导致整个逻辑崩溃
- c - 在 C 中创建数据结构
- virus - 我们在 QNAP NAS 上使用 ResilioSync,而我们的一个 NAS 被 QLocker 勒索软件攻击,我们该怎么办?
- typescript - 使用 Prisma 2 和 NestJS 进行日志记录 - 依赖注入问题?
- haskell - Haskell:无法将预期类型“IO t0”与实际类型“[Char]”匹配