Выходит ошибка строка, которую нужно декодировать, закодирована неправильно

Question

Я беру id через {query} из useRouter и шифрую, затем вставляю в ссылку, после этого я должен дешифровать это на той странице на которую я перешёл через ссылку и вставить в инпут, но я получаю ошибку только если обновлю страницу, а так id дешифруется InvalidCharacterError: Invalid character: the string to be decoded is not correctly encoded. Помогите разобрать с этим, ещё когда я перехожу по ссылке на другую страницу то id дешифруется, но стоит лишь обновить страницу то появляется эта ошибка. Заранее благодарю!

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

function Card() {
  const {query} = useRouter();
  const code = (`${query.id}`)
  var base64 = require('base-64');
  var utf8 = require('utf8');
  var bytes = utf8.encode(code);
  var encoded = base64.encode(bytes);
  console.log(decodedData1);  
     
  const [data, setData] = useState([])
    useEffect(()=>{
      fetch(`https://example.com/pay/type/`)
      .then(response => response.json())
      .then(result => setData(result))
    },[])

    return (
     <>
      <div className={styles.container}>
         {   data.map((value)=>{
              
          return(
            <Link href={`payment/?id=${encoded}`} 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;

Вот это код страницы где я дешифрую {query.id}:

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

const Pay = ()=>{
 
    const [data, setData] = useState([])
    const {query} = useRouter();
    const code = (`${query.id}`)
    var base64 = require('base-64');
    var utf8 = require('utf8');
    var decodedData1 = base64.decode(code);
    var text = utf8.decode(decodedData1);
    console.log(text)
     
    useEffect(()=>{
        fetch(`https://example.com/pay/user/`)
        .then(response => response.json())
        .then(result => setData([...data,result]))
  },[])
  
    return(
        <>
        </>
    )
}

export default Pay

Answer 1

Реализация своего собственного хранилища данных:

Создадим хранилище. Оно будет представлять собой класс с двумя методами(сохранить значение, вернуть значение). Создадим экземпляр класса и его будем экспортировать.

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

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

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

const payKey = new Store();

export { payKey };

В компоненте Card подключим хранилище и при изменении данных будем вызывать метод setData для сохранения значений.

import { payKey } from "./store";

function Card() {
  const {query} = useRouter();
  
  useEffect(() => {
    payKey.setData(query.id);
  }, [query.id])
  
  return (
    <Link href={`payment/`} key={value.id}>
      <div className={styles.paytype}>{'И другой код'}</div>
    </Link>
  )
}

В компоненте Pay так же подключим наше хранилище и в нужном месте будем вызывать геттер метод data

import { payKey } from "./store";

const Pay = ()=>{
  return (
    <div>{payKey.data}</div>
  )
}

Реализация с использованием useContext()

Создадим контекст. В идеальных условиях, контекст должен быть создан там, где монтируется основной компонент приложения(обычно это компонент App в файле index.js)

Создадим файл, в котором реализуем контекст:

import { createContext } from "react";

export const ContextStorage = createContext();

Импортируем данные к файлу с реализацией компонента Card.
При изменении query.id данные в контексте будут меняться

import { ContextStorage } from "./contexts.js";

function Card() {
  const {query} = useRouter();
  const [contextId, setCID] = useState('');
  
  useEffect(() => {
    setCID(query.id);
  }, [query.id]);
  
  return (
    <ContextStorage.Provider value={contextId}>
      <Link href={`payment/`} key={value.id}>
        <div className={styles.paytype}>{'И прочий код'}</div>
      </Link>
    </ContextStorage.Provider>
  )
}

В компоненте Pay реализуем чтение данных из контекста

import { ContextStorage } from './contexts.js'

const Pay = ()=>{
  const cont = useContext(ContextStorage);

  return (
    <div>{cont}</div>
  )
}

БЛОГ НА HUSL

Выходит ошибка строка, которую нужно декодировать, закодирована неправильно

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

Реализация своего собственного хранилища данных:

Реализация с использованием useContext()