Блог

Во-первых, я совершенно новичок в разработке приложений Shopify, а также в React и Next.js , так что это может быть немного глупый вопрос. В настоящее время я отправляю запрос на веб-сайт и использую ответ в компоненте React, который я экспортирую / визуализирую, поэтому мне нужно подождать, пока я не получу этот ответ, чтобы экспортировать свой компонент React, чтобы он не был неопределенным. Вот код:

  if (typeof window === 'undefined')
  { 
    axios(config) // the actual request I'm waiting on
    .then(function (response) {
      siteHTML = response.data; // the element I'm adding to the react //component
    })
    .catch(function (error) {
      console.log(error);
    });
  }


// I need to define this function after I have the variable "siteHTML"
// If I define it with 'let' outside of the function first and then reassign 
// it after the response, react uses the first empty assignment. If I define 
// it in the function, it's a local not global variable.
  const Index = () => ( // The Actual Next.js/React Export To Be Rendered
<div>
  <h1>Site HTML:</h1>
  <div>
    { siteHTML }
  </div>
</div>
)



export default Index;  

По сути, функция Index должна быть определена после ответа на запрос Axios. Я не могу определить Index и запустить «экспорт индекса по умолчанию» внутри «.then», потому что «экспорт индекса по умолчанию» должен быть на верхнем уровне. Я не могу определить индекс внутри ‘.then’, потому что тогда он является локальным для функции. И я не могу определить индекс вне функции, а затем установить значение внутри ‘.then’, потому что react будет использовать начальное пустое присвоение.

Это моя проблема! Я уверен, что есть какое-то очевидное решение, которое кто-нибудь увидит через две секунды, но я просто не могу. Спасибо вам за любую помощь!

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

Что-то вроде:

 const Index = () => { 
  return !siteHTML ? (
    <div>loading...</div>
   ) : (
      <div>
        <h1>Site HTML:</h1>
        <div>
          { siteHTML }
        </div>
      </div>
   )
}
 

Так что, если siteHTML он еще не существует — верните загрузочный счетчик или загрузочный текст или что угодно, что вы хотите. Как только запрос завершится siteHTML , функция возврата переключится и отобразит это вместо этого.