Удаление и копирование элементов массива в React - PullRequest
Новая
       5

Удаление и копирование элементов массива в React

0 голосов
/ 28 февраля 2020

Мне было поручено добавить кнопку копирования и удаления на одну из наших таблиц. Я пытаюсь передать индекс с карты на удаление и копирование по клику, и это действительно удаляет, но ...

Проблема: если вы скопируете строку, у нее будет точно такое же "i", как и у оригинала, и он перемещает положение всех тех, кто находится под ним, ужасно испортив удаление

У меня сложилось впечатление, что если я установлю setRows () на что-то новое, он снова запустит отображение и выдаст им все правильные значения. каждая функция, но это не так, почему? 

const AdvancedTable = () => {
    const [rows, setRows] = useState(tableRows); ///tableRows is basically an array of divs
    const deleteOnClick = (i: number) => {
        setRows(() => {
            const myRows = [...rows];
            myRows.splice(i, 1);
            return myRows;
        });
    }
    const copyOnClick = (i: number) => {
        setRows(() => {
            const myRows = [...rows];
            myRows.splice(i, 0, rows[i]);
            return myRows;
        });
    }
    return (

            <Paper>
                     {
                         rows.map((row: any, i: number) => (
                                     <div>
                                         <IconButton onClick={() => { deleteOnClick(i) }} size="small">
                                             <ClearIcon />
                                         </IconButton>
                                         <IconButton onClick={() => { copyOnClick(i) }} size="small">
                                             <FileCopyIcon />
                                         </IconButton>
                                     </div>
                                 </TableCell>
                                 {row}

                         ))}
            </Paper>
    );
}
export default AdvancedTable;

1 Ответ

0 голосов
/ 28 февраля 2020

Хотите ли вы, чтобы метод copy копировал строку ниже той, которую вы щелкнули, или отправил ее в конец массива?

Может быть, это может помочь вам, если вы можете вызвать значение i из вашей строки объект с .i 

const copyOnClick = (i: number) => {
    setRows(() => {
        const myRows = [...rows];
        // send the new row to the end of the array
        myRows.splice(rows.length, 0, rows[i]);
        // change the new row i value to + 1 of the last object that was previously in the array
        myRows[myRows.pop().i].i = rows.pop().i + 1
        return myRows;
    });
}
...