React JS создать счетчик без useState (чтобы не обнулялся)

Question

React JS создать счетчик без useState (чтобы не обнулялся)

Рейтинг: 1Ответов: 1Опубликовано: 27.01.2023

В моем проекте есть кнопка для копирования элемента (table). При копировании каждая новая копия создается с именем и порядковым номером. При закрытии страницы стейт обнуляется, если я хочу создать еще несколько копий элемента потом, счетчик снова именует их с нуля, это создает ошибку в работе приложения. Как можно написать функцию для счетчика, чтобы он начинал отсчет с порядкового номера последней копии. Вот мой код:

const [copyTableCounter, setCopyTableCounter] = useState(0);
const onCopyTable = (element) => {
        const copiedTable = {
            id: table.id,
            name: `${element.name}_COPY (${copyTableCounter})`,
            position: {
                x: element.position.x + 5,
                y: element.position.y + 5,
            },
            columns: table.columns,
        };

        onCopyTableHandler(copiedTable, areaName);
    };

javascript reactjs react-hook

Источник: Stack Overflow на русском

Answer 1

▲ 0Принят

Допустим, есть объект(если я правильно понял из комментариев):

const diagram = {
  areas: [{
    tables: [
      { "id": 11, "originalTableId": 3129, "name": "MY_TABLE_COPY (1)", "position": { "x": 14.0, "y": 445.0 }, "columns": [] },
      { "id": 12, "originalTableId": 3128, "name": "MY_TABLE_COPY (1)", "position": { "x": 14.0, "y": 445.0 }, "columns": [] },
      { "id": 13, "originalTableId": 3127, "name": "MY_TABLE_COPY (1)", "position": { "x": 14.0, "y": 445.0 }, "columns": [] }
    ]
  }]
}

Тогда можно начальное состояние устанавливать исходя из текущих данных

// Начальное состояние - максимальный id
const [copyTableCounter, setCopyTableCounter] = useState(diagram.areas[0].tables.map(el => el.id).sort((a,b) => b - a)[0]);

// Начальное состояние - количество элементов в tables
const [copyTableCounter, setCopyTableCounter] = useState(diagram.areas[0].tables.length);

// Или напрямую использовать в фукнции без сохранения в переменной состояния
// т.к. это не требует дополнительных вычислений
name: `${element.name}_COPY (${diagram.areas[0].tables.length})`,

Я бы предложил в areas создать новый ключ, назовем его tableCounter(к примеру) и смотрел бы на него и при изменении данных по таблицам менял бы это значение

const diagram = {
  areas: [{
    tables: [],
    tableCounter: 0 // вот тут хранить нужное значение для текущей areas
  }]
}

Мне кажется этот вариант проще, наглядее и управляем + он попадет в ваш текущий механизм сохранения данных.

React JS создать счетчик без useState (чтобы не обнулялся)

Ответы