Компоненты реакции My Stripe не загружаются

МОЯ цель - связать мое реагирующее приложение с Stripe, используя их компоненты. Но проблема, с которой я сталкиваюсь, заключается в том, что мои реагирующие компоненты не загружаются. гитхаб ссылка на проект вы можете найти соответствующие файлы внешнего интерфейса / src / screens / checkout / payment. form внутри компонента Element, предоставленного полосой, вы можете видеть все, что на самом деле. У меня есть push-код со всеми учетными данными. Ошибка, которую я получаю,

v3:1 Uncaught (in promise) IntegrationError: Please call Stripe() with your publishable key. You used an empty string.
    at d (v3:1:52111)
    at new e (v3:1:271693)
    at ko (v3:1:303926)
    at initStripe (stripe.esm.js:101:1)
    at stripe.esm.js:125:1

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

Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
Как передать состояние или данные в react-router v6
Как передать состояние или данные в react-router v6
react-router - это лучшая библиотека для работы с маршрутизацией в reactjs. С помощью react-router вы передаете состояние или данные от одного...
1
0
34
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий
const [stripeApiKey, setStripeApiKey] = useState("");

Я думаю, что эта строка в верхней части файла является причиной, по которой вы столкнулись с этой проблемой. Ваш код выглядит нормально, но вы забываете, как работает жизненный цикл реакции.

Первоначальный рендер компонента WrapPayment.jsx попытается вызвать loadStripe(""), потому что начальное состояние stripeApiKey равно ""

Я бы предложил создать переменную состояния загрузки следующим образом:

const [loading, setLoading] = useState(true);

Добавьте вызов setLoading(true); здесь:

async function getStripeApiKey() {
    const { data } = await axios.get("/api/v1/stripeapikey");
    setStripeApiKey(data.stripeApiKey);
    setLoading(false);
}
 

И визуализировать так:

if(loading) {
    return "Some Loader Component here"
} else {
    return (
      <>
          {/* <Payment/> */}
          <Elements stripe={loadStripe(stripeApiKey)}
              options={options}
          >
              <Payment/>
          </Elements>
  
      </>
    )
}

Другие вопросы по теме