我有一個記錄串列，它填滿了一個表格，并在每個記錄旁邊添加了一個洗掉按鈕。當我按下洗掉按鈕時，在控制臺中我可以看到記錄確實減少了1，而且我選擇的要洗掉的專案確實被洗掉了，但是這一變化不會顯示在頁面的表格本身中。這可能是什么問題？
正如你在下面的圖片中所看到的，當我點擊移除按鈕時，記錄的數量減少了，但該專案不會從表格本身被移除。
const AddingTable = (/span>) => {
const [records, setRecords] = useState（someRecordsReturnedFromAnAPI）。
let filterFn = { fn: items => { return items;};> return items };
let headCells = [...];
const { TblContainer, TblHead, TblPagination, recordsAfterPagingAndSorting } = useTable（records, headCells, filterFn）。
function handleRemoveClick（itemList, item） {
const index = itemList.indexOf( item);
itemList.splice（index, 1）。
setRecords（ itemList）。
}
function TableRowWithRemove(props) {
let { itemList, item } = props;
return (
<TableRow>/span>
//... 具有記錄內容的表格單元格
<TableCell>
<button onClick={（） => handleRemoveClick(itemList, item)}> 洗掉</按鈕>
</TableCell>
</TableRow>
)
}
return (
<>/span>
<TblContainer>/span>
<TblHead />>
<TableBody>
{
recordsAfterPagingAndSorting().map((item, index) => (
< ConditionalTableRow key={index} item={item} itemList={records} />
))}
</TableBody>）。
</TblContainer>/span>
<TblPagination />/span>
<ConditionalDiv />
</>
);
}
const TblPagination = () => (
typeof records === 'undefined'/span>?
[]
:
<TablePagination?
component="div"/span>
page={page}
rowsPerPageOptions={pages}。
rowsPerPage={rowsPerPage}。
count={records.length}
onPageChange={handleChangePage}。
onRowsPerPageChange={handleChangeRowsPerPage}/>
)
const recordsAfterPagingAndSorting =（）=> {
if (typeof records !== 'undefined') {
return stableSort(filterFn.fn(records), getComparator(order, orderBy)
.slice(page * rowsPerPage, (page 1) * rowsPerPage)
}
else[/span
return null。
}
if (typeof recordsAfterPagingAndSorting !== 'undefined')
return {
TblContainer。
TblHead,
TblPagination。
分頁和排序后的記錄
}
else[/span
return {
TblContainer,
TblHead,
TblPagination。
}
}
uj5u.com熱心網友回復：
嘗試使用，因為splice不會改變物件的地址。
function handleRemoveClick（itemList, item） {
const index = itemList.indexOf(item)。
let newItemList =[...itemList]。
newItemList.splice(index, 1) 。
setRecords（newItemList）。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/334247.html
標籤：