Как сохранить query.id в localStorage?

Question

Здраствуйте, это мой по счёту 2 или 3 вопрос о моей проблеме с id в localStorage, последнее что осталось решить чтобы на 90% закончить проект. Я не смог найти информацию о решении, так как я пишу на Next.js и на нём localStorage как то странно работает. Проблема:

На этой главной странице я id должен сохранить в localStorage

import { useState, useEffect, use } from 'react';
import styles  from '../Card/Card.module.css'
import Link from 'next/link';
import { useRouter } from 'next/router'

function Card() {
    

    
  const {query} = useRouter()
  
  useEffect(() => {
    payKey.setData(query.id);
  }, [query.id])



  useEffect(()=>{
    localStorage.setItem('id',payKey.data)
    console.log(localStorage)
  })


    const {query} = useRouter()
    const [info, setInfo] = useState([])
    useEffect(()=>{
      fetch(`https://example.com/pay/type/`)
      .then(response => response.json())
      .then(result => setInfo(result))
      },[])

    return (
     <>
      <div className={styles.container}>
         {   info.map((value)=>{
              
          return(
            <Link href={`payment`} key={value.id}>
            <div  className={styles.paytype}>
                <div className={styles.photo}>
                  <img src={value.image} alt="image"/>
                  <span>{value.name}</span>
                </div>
                <div><p>{value.text}</p></div>
            </div>
            </Link>
             )

            })
         }
      </div>
     </>
    );
  }
  
  export default Card;

И вызвать в другой странице этот id из localStorage и вставить в value

<input type="hidden" name="ClientId" value={''} />

Куда сохраняется id и откуда я импортировал payKey:


class Store {
  #data = "";
  constructor(begin) {
    this.#data = begin || "";
  }

  setData(data) {
    this.#data = data;
  }

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

const payKey = new Store();
export { payKey };

Answer 1

проблема в том, что твой Store никак не участвует в жизненном цикле реакт-компонента, поэтому он и не вызывает перерендер компонента, а значит и useEffect, в котором ты сохраняешь id в localStorage, не отрабатывает

Думаю, чтобы решить проблему, достаточно сделать так:

import Link from 'next/link';
import { useRouter } from 'next/router';
import { useState, useEffect, use } from 'react';

import styles from '../Card/Card.module.css'

function Card() {
  const { query } = useRouter();

  const [info, setInfo] = useState([]);
  
  useEffect(() => {
    payKey.setData(query.id);

    localStorage.setItem('id',payKey.data);
    console.log(localStorage);
  }, [query.id]);

  useEffect(() => {
    fetch(`https://example.com/pay/type/`)
      .then(response => response.json())
      .then(result => setInfo(result))
  }, []);

  return (
    ...
  );
}
  
export default Card;

БЛОГ НА HUSL

Как сохранить query.id в localStorage?

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