Не могу использовать данные из localStorage

Question

У меня есть хранилище, я сохраняю туда id затем чтобы не пропадал при обновлении страницы да и в общем при переходе на другой сайт и возвращении я сохраняю id в localStorage, затем мне этот id надо передать в определённое место, но я не могу использовать его, выдаёт ошибку ReferenceError: state is not defined

import Link from 'next/link'
import { useState, useEffect} from 'react';
import { payKey } from "../Store";
import {amountKey} from '../StoreAmount'

const Pay = ()=>{
    
 

    const [amount, setAmount] = useState('');
  
       useEffect(() => {
           amountKey.setData(Number(amount));
       }, [amount])

       if (typeof window !== 'undefined') {
        const [ state, setState ] = useState(()=>JSON.parse(localStorage.getItem('client')))
        useEffect(()=>{
            localStorage.setItem('client', JSON.stringify(payKey.data))
        },[])
        console.log(state)
      }
      

  

   
   
    
    return(
        <>
             <div className={styles.wrapper}>
          <div className={styles.container}>
         
          <form action="https://app.0xProcessing.com/Payment" method="post">
                          <input type="hidden" name="test" value="false" />
                          <input type="email" name="email" placeholder='Email'/>
                          <input type="number" name="amountusd"  placeholder='Количество' value={amount} onChange={(e) => setAmount(e.target.value)} />
                          <input type="text" name="currency" placeholder='Валюта' />
                          <input type="hidden" name="ShopId" value="6QsQHcQ6bX" />
                          <input type="hidden" name="ClientId" value={state} />
                          <input type="hidden" name='SuccessUrl' value={`https://next-js-web-sandy.vercel.app/success/?id=${payKey.data}`}/>
                          <input type="hidden" name='AutoReturn' value="true" />
                          <button type="submit">Send</button>
          </form>       
          </div>
         </div>
         <h1 className={styles.heading}><Link href={`/?id=${payKey.data}`}><button>Назад</button></Link></h1>
        </>
    )

}

export default Pay

Хранилище:

class Store {
    #data = "";
    constructor(begin) {
      this.#data = begin || "";
    }
  
    setData(data) {
      this.#data = data;
    }
  
    get data() {
      return this.#data;
    }
  }
  
  const payKey = new Store();
  
  export { payKey };

И ещё вопрос, как брать это id из LocalStorage и использовать в нужном мне месте то есть в Success?

import Link from 'next/link'
import { useEffect } from 'react'
import { payKey } from "../Store";
import {amountKey} from '../StoreAmount'




const Success = ()=>{
    
   console.log(amountKey)

    return(
        <>
            <h1><Link  href={`/?id=${payKey.data}`}>Назад</Link></h1>
          <form action="https://example.com/pay/success/" method="post">
                        <input type="hidden" name="tg_id" placeholder='Telegram ID' value={payKey.data}/>
                        <input type="hidden" name="amount"  placeholder='Количество' value={Number(amountKey.data)}/>
                        <input type="datetime-local"  name="date" placeholder='Время' />
                        <button type="submit">Send</button>          
           </form>     
           
        </>
    )
}

export default Success

Answer 1

вам нужно устанавливать значение localStorage в момент, когда вы меняете payKey(с проверкой на равенство), иначе легко накосячить с актуальностью значения.

И при первом рендере делать что-то вроде

const data = localStorage.getItem('client')
if (data) {
payKey.setData(JSON.parse(data))
}

А везде ниже использовать только payKey.

БЛОГ НА HUSL

Не могу использовать данные из localStorage

Ответы (1 шт):