Как запушить новый обьект в массив, который хранится в localStorage?

Question

[Denis Izmailov]

const [ surname, setSurname] = useState<string>('');  


    interface IData {
        surname: string;
    }

    let dataArray: IData[] = [];

    const dataTest: IData = {
        surname: surname,
    };

    const setDataLocal = () => {
        const dataLocal = JSON.parse( localStorage.getItem('data'));
        // dataLocal.push(dataTest)
        // console.log(dataLocal);
        dataLocal.push(dataTest)
    };

Ошибка в области ( localStorage.getItem('data')):
Аргумент типа "string | null" нельзя назначить параметру типа "string".
Тип "null" не может быть назначен для типа "string".ts(2345)

Comments

[Сергей delphinpro]

const dataLocal = JSON.parse( localStorage.getItem('data') ?? '[]' );

[Александр]

Можете использовать готовый хук:
https://www.30secondsofcode.org/react/s/use-local-...
https://www.30secondsofcode.org/react/s/use-persis...
Необходимо будет только типы написать.

Answer 1

[HealSpirit]

Вызов Storage.getItem() может вернуть либо строку либо null, а JSON.parse() ожидает только строку.

Можно сделать так:

const dataLocal = JSON.parse(localStorage.getItem('data') || '[]');

Можно так

const value = localStorage.getItem('data');

    if (value) {
      const dataLocal = JSON.parse(value);
    }

но тут проблема в плюс одной вложенности.

Еще вариант

const value = localStorage.getItem('data');

    if (!value) {
      return;
    }

    const dataLocal = JSON.parse(value);

но прокатит только внутри функции

Comments

[Алексей Уколов]

это не совсем правильно

Что же тут неправильного на ваш взгляд? На мой - это самый адекватный вариант.

[HealSpirit]

Алексей Уколов, успели до исправления) согласен, '[]' лучше чем '' в этой ситуации