сохранение состояния в локальное хранилище в React

Question

Я вызываю эту функцию при каждом нажатии кнопки.

проблема в том, что при первом нажатии кнопки первый элемент не сохраняется до следующих щелчков, поэтому первый элемент никогда не сохраняется

 const add=()=>{
    if(website){
      setInfo([...info,{website:website,password:generate()}])
      localStorage.setItem("data",JSON.stringify(info));
    }
  }

информация о состоянии:

const[info,setInfo]=useState([])

Answer 1

Функция

setInfo обновит состояние асинхронно, поэтому, когда вы вызываете функцию localStorage.setItem и передаете в нее info, массив info еще не обновлялся.

Вы можете создать массив и передать его функциям setInfo и setItem. Таким образом, вам не нужно зависеть от функции setInfo для обновления состояния перед его сохранением в localStorage

const add = () => {
   if(website){
      const arr = [...info,{website:website,password:generate()}]
      setInfo(arr);
      localStorage.setItem("data",JSON.stringify(arr));
   }
}

Answer 2

изменение setInfo будет доступно при следующем рендере. Вы должны вычислить значение в отдельной переменной, а затем установить его.

const add=()=>{
  if(website){
    let value = [...info,{website:website,password:generate()}];
    setInfo(value)
    localStorage.setItem("data",JSON.stringify(value));
  }
}

Answer 3

setInfo т.е. setState асинхронно c. Для этого вам необходимо использовать useEffect.

    useEffect(() => {
        localStorage.setItem('state', JSON.stringify(info));
    }, [info]); // run whenever info is changed

Каждый раз, когда изменяется состояние, т.е. info, он будет входить в блок useEffect и обновлять локальное хранилище.