Блог

Я пытаюсь добавить кнопку «удалить» к каждой строке данных, используя react-table. Кнопка объединяет данные и удаляет эту строку из данных при нажатии. При первом нажатии кнопки «удалить» она работает правильно. Однако при втором нажатии ничего не происходит. По какой-то причине changeData данные не изменяются при втором запуске. Почему это происходит?

 function DataTable({columns, data_rows}) {
    const [data, changeData] = useState(data_rows);

    if (columns[0].Header !== "Action") {
        columns.unshift({
            Header: 'Action'
        });
    }
    columns[0]['columns'] = [{
        Header: ' ', Cell: ({row}) => (
            <ButtonGroup>
                <Button className="button-dark button-sm" onClick={() => {
                    const dataCopy = [...data];
                    dataCopy.splice(row.index, 1);
                    changeData(dataCopy);}}>
                    Remove
                </Button>
            </ButtonGroup>
        )
    }]
    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        prepareRow
    } = useTable({
        columns,
        data
    });


    return (
        <table {...getTableProps()}>
            <thead>
            {headerGroups.map(headerGroup => (
                <tr {...headerGroup.getHeaderGroupProps()}>
                    {headerGroup.headers.map(column => (
                        <th {...column.getHeaderProps()}>{column.render("Header")}</th>
                    ))}
                </tr>
            ))}
            </thead>
            <tbody {...getTableBodyProps()}>
            {rows.map((row, i) => {
                prepareRow(row);
                return (
                    <tr {...row.getRowProps()}>
                        {row.cells.map(cell => {
                            return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
                        })}
                    </tr>
                );
            })}
            </tbody>
        </table>
    );
}