要解决表格在创建、编辑或删除新行后不更新的问题,可以使用以下代码示例:
ID
Name
Action
{{ item.id }}
{{ item.name }}
import React, { useState } from 'react';
const Table = () => {
const [items, setItems] = useState([
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' }
]);
const addItem = () => {
// 添加新行
const newItem = { id: items.length + 1, name: 'New Item' };
setItems([...items, newItem]);
};
const editItem = (item) => {
// 编辑行
const updatedItems = items.map((i) => {
if (i.id === item.id) {
return { ...i, name: 'Updated Item' };
}
return i;
});
setItems(updatedItems);
};
const deleteItem = (item) => {
// 删除行
const updatedItems = items.filter((i) => i.id !== item.id);
setItems(updatedItems);
};
return (
ID
Name
Action
{items.map((item) => (
{item.id}
{item.name}
))}
);
};
export default Table;
这些代码示例中,通过在添加、编辑和删除行时更新数据源(items数组),使表格在更新后能够正确地显示新的行。