单击行按钮从 antd table 中删除行

Question

我正在尝试从 antd table 中删除数据行，我正在使用下面的代码，当我点击删除按钮时，我的数据集是空的。

请帮忙，提前致谢...

我正在从 API 加载数据，代码如下

    const LoadAttendance = async() => {

    setLoading(true);
    //setData([]);

    let url = window.$api_url + '/teacher/myattendance';
  
    await axios.get(url)       
    .then(async response => {
        const actualData = await response.data;
      
        if (response.status == 200) {

            //setData(actualData);
            setData(actualData)
            console.log("actualData " + JSON.stringify(actualData));

        }
        setLoading(false);

    })
    .catch(error => {

        setLoading(false);
    
    });


  };

我的 Antd table 是这样的

return <div>

        <Table
            columns={columns} dataSource={data}
            rowKey="studentId" 
            pagination={false}

            />


</div>;

这是我的删除功能

    const handleDelete = async(stid) => {
    //Here is problem data is empty tried both ways data as well as...data
    console.log("Data source " + JSON.stringify([...data]));

    const myData = data.filter(item => item.studentId !== stid);
    
    setData(myData);
  };

这是antd专栏

let cols = [
            
            {
                title: 'Sr. #',
                width: 150,
                
                render: (text, record, index) => <span style={{fontWeight: 'bold'}}>
                {index+1}. &nbsp;

                  <Popconfirm title="Sure to delete?" onConfirm={() => handleDelete(record.studentId)}>
                    <a>Delete</a>
                  </Popconfirm>

              </span>
            }
]

Answer 1

看起来可能是您 data 状态的陈旧外壳。我建议改为尝试功能状态更新。功能状态更新将从之前的状态更新，而不是使用在任何回调范围内关闭的状态。

const handleDelete = (stid) => {
  setData(data => data.filter(item => item.studentId !== stid));
};

单击行按钮从 antd table 中删除行

Remove row from antd table on row button click

api

reactjs

antd

react-hooks

use-state