Пустой массив после добавления первого элемента
Я хочу передать массив объектов в LocalStorage. Но после добавления первой записи передается пустой массив и только после добавления второй записи передается 1 запись, после добавления третьей записи в массиве уже 2 записи.
<button onClick = {() => {
setCustomArr([...CustomArr, { item1: null, item2: null, item3: null }])
localStorage.setItem("localStIt", JSON.stringify(CustomArr))
}}
>Add item</button>
Вот как выглядит код кнопки: при нажатии я добавляю новую запись в массив и заполняю текущий массив в LocalStorage. И массив с одной записью я получаю только после второго клика, но после первого клика массив пуст.
Почему это происходит и как это исправить?
const [NewCustomArr, setNewCustomArr] = useState()
<button onClick = {() => {
setCustomArr([...CustomArr, { item1: null, item2: null, item3: null }])
setNewCustomArr(CustomArr)
localStorage.setItem("localStIt", JSON.stringify(NewCustomArr))
}}
>Add item</button>
@DaveNewton, я понял. Не могли бы вы показать мне пример кода, пожалуйста?
Создайте новое значение и используйте его как для обновления состояния, так и для помещения в локальное хранилище. Создайте временную переменную и используйте ее в setState и установите значение localstorage.
@DaveNewton, я обновил вопрос, добавив новое значение. Взгляни, пожалуйста. Вы имеете в виду это?
Отвечает ли это на ваш вопрос? Метод установки useState не отражает изменение немедленно
Ответы 2
Поскольку установка состояния является асинхронным действием, вам следует использовать шаблон обратного вызова setState, чтобы получить текущее состояние и правильно установить обновленное состояние. Вот пример:
<button
onClick = {() => {
const newItem = { item1: null, item2: null, item3: null }
setCustomArr(prevState => {
localStorage.setItem(
"localStIt",
JSON.stringify([...prevState, newItem])
)
return [...prevState, newItem]
})
}}
>
Add item
</button>
Или вы можете присвоить обновленное значение переменной и использовать его для обеих операций.
<button
onClick = {() => {
const newItem = { item1: null, item2: null, item3: null }
const updated = [...customArr, newItem]
setCustomArr(updated)
localStorage.setItem(
"localStIt",
JSON.stringify(updated)
)
}}
>
Add item
</button>
setCustomArr с useState — это асинхронная операция, поэтому вам нужно назначить переменную для обновления значения и использовать ее для обеих операций (локальное хранилище и обновление состояния).
const [NewCustomArr, setNewCustomArr] = useState()
<button onClick = {() => {
//this variable is to store the updated value of the state
const updatedArray = [...CustomArr, { item1: null, item2: null, item3: null }]
setCustomArr(updatedArray)
setNewCustomArr(updatedArray)
localStorage.setItem("localStIt", JSON.stringify(updatedArray))
}}
>Add item</button>
Состояние установки асинхронное; вы используете его до разрешения штата. Создайте новое значение и используйте его как для обновления состояния, так и для помещения в локальное хранилище.