0

У меня есть хранилище чтобы брать значение из input и отправлять его туда, затем брать его из хранилища и использовать его в нужном месте, но не могу сделать так чтобы значение бралось только при клике Отправить и сохранялось в хранилище, значение изменяется при вводе информации(букв, цифр) или их удалении.

Таких хранилищ у меня 3, для email, для number и значение валюты, это один из них

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

Тут, на странице Payment я должен взять значение и сохранить в хранилище, а затем вставить её в value внутри ipnut на странице Success где всё это я передам в бэкенд через post.

import styles from './Payment.module.css'
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 localData = localStorage.getItem('client')
        const [code, setCode] = useState(localData? JSON.parse(localData): console.log('ERROR'))  
        console.log(code)
      }

      
     useEffect(()=>{
       localStorage.setItem('client', JSON.stringify(payKey.data))  
     })

  

   
   
    
    return(
        <>
             <div className={styles.wrapper}>
          <div className={styles.container}>
         
          <form action="https://app.0xProcessing.com/Payment" method="post">
                          <input type="hidden" name="test" value="true" />
                          <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={payKey.data} />
                          <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

Вот страница Success,

import Link from 'next/link'
import { useRouter } from 'next/router'




const Success = ()=>{
     
   

    return(
        <>
          <form action="https://example.com/pay/success/" method="post">
           ///в value вставляю значение из инпута которое хранится в хранилище
                        <input type="hidden" name="tg_id" value={} placeholder=' ID'/>
                        <input type="hidden" name="amount"  placeholder='Количество' />
                        <input type="datetime-local"  name="date" placeholder='Время' />
                        <button type="submit">Send</button>
                        
           </form>     
           
        </>
    )
}

export default Success
16
  • Ну во первых это не redux, а собственное хранилище. Во вторых, если оно сохраняется, то разговор о каком хранилище, localStorage?
    – SwaD
    Commented 24 дек. 2022 в 16:37
  • Здраствуйте, я о собственном хранилище, то есть только при нажатии на Отправить сохранялось значение из инпута чтобы я смог передать его на странице Success, вызвав таким образом import {emailKey} from '../StoreEmail' @SwaD
    – Jalil
    Commented 26 дек. 2022 в 15:27
  • Вызовите getter метод в нужом месте emailKey.data и все. Не понятна суть вопроса.. Если данные уже и так сохраняются, зачем их повторно где то сохранять?
    – SwaD
    Commented 26 дек. 2022 в 15:31
  • ладно, даже если введённые значения куда то сохраняются то как их использовать? Мну нужно сохранить это значение в хранилище, а потом уже вызывать и вставлять их куда надо@SwaD
    – Jalil
    Commented 26 дек. 2022 в 16:11
  • Где надо сохраняете emailKey.setData(name);, где надо вызываете и используете(вставляете) const secret = emailKey.data или прям в форме <input type="hidden" name="tg_id" value={emailKey.data} placeholder=' ID'/>. Вопрос понятнее не стал
    – SwaD
    Commented 26 дек. 2022 в 16:20

1 ответ 1

0

Для сохранения в localStorage и возможности чтения данных, лучше всего это организовать в классе, который выполняет фукнцию хранилища данных:

class StoreEmail {
  #data = "";
  constructor() {
    // При создании, читаем из стора, если ничего нет, пустая строка
    this.#data = localStorage.getItem("key") || "";
  }
  /** @param {string} data */
  setData(data) {
    this.#data = data;
    localStorage.setItem("key", data); // Сохраняем данные в стор при изменении
  }

  get data() {
    return this.#data;
  }
}

В нужном компоненте

import {emailKey} from './store.js';

// Просто подставляем данные в нужном месте
<input type="hidden" name="tg_id" value={emailKey.data} placeholder=' ID'/>

Или сохраняем в состоянии компонента

const Success = ()=>{
  const [id, setId] = useState(emailKey.data)
  render (<input type="hidden" name="tg_id" value={id} placeholder=' ID'/>)
}
6
  • Выдаёт ошибку TypeError: Cannot read properties of undefined (reading 'data') когда пишу data после emailKey , вот так console.log(emailKey.data) . И ещё можете объяснить как туда id попадает, в хранилище @SwaD
    – Jalil
    Commented 27 дек. 2022 в 19:55
  • Можете объяснить как в хранилище id попадает? @SwaD Я не могу понять, я просто беру и вызываю emailKey, но что внутри data?
    – Jalil
    Commented 28 дек. 2022 в 12:30
  • Почитайте про классы. Так же, возможно, вы просто забыли заимпортить emailKey -> import {emailKey} from './store.js';?
    – SwaD
    Commented 28 дек. 2022 в 13:00
  • Нет, я всё ипортировал, и ещё дело не в импорте, а в наличии данных в хранилище, в консоль выводит undefined при console.log(emailKey) , а если писать console.log(emailKey.data) выдаёт ошибку. И ещё если приписать к хранилищу const payKey = new StoreEmail(); export { emailKey} то говорит что localStorage нету. Меня тревожит одна вещь, как сохранить ``` query.id``` в localStorage. @SwaD
    – Jalil
    Commented 28 дек. 2022 в 18:59

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.