如何等到一个请求之后再导出React组件.(Shopify App Development)

Question

首先，我是一个全新的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请求响应之后定义。我不能定义索引和运行'导出默认索引'在'。然后'，因为'export default index'需要在顶层。我不能在'。因为它是函数的局部。我不能在函数外定义索引，然后在'中设置值。然后是'，因为react会使用初始的空赋值。

这就是我的问题!我肯定会有一些显而易见的解决方案，有人会在两秒钟内看到，但我就是找不到。谢谢你的帮助!

Answer 1

我认为你缺少的关键元素是使用条件渲染。你可以把它应用到整个return语句中…

类似:

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

因此，如果siteHTML还不存在-返回一个加载旋转器或加载文本或任何你想要的。一旦请求完成并且siteHTML，返回函数将切换过来并呈现它。