javascript 如何等待React组件的导出，直到收到请求,(Shopify App开发)

ozxc1zmp 于 2023-10-14 发布在 Java

关注(0)|答案(2)|浏览(87)

首先，我对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请求响应之后定义。我不能在“. then”中定义Index并运行“export default index”，因为“export default index”需要在顶层。我不能在'.then'中定义Index，因为它是函数的局部变量。我不能在函数外部定义Index，然后在'. then'内部设置值，因为react将使用初始空赋值。
那是我的问题！我相信有一些明显的解决方案，有人会看到在两秒钟内，但我就是不能。谢谢你的帮助！

JavaScript

来源：https://stackoverflow.com/questions/66322088/how-to-wait-to-export-react-component-until-after-a-request-shopify-app-develo

2条答案

按热度按时间

l0oc07j21#

我认为你缺少的关键元素是使用conditional render。实际上，你可以把它应用到整个return语句中。
例如：

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

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

赞(0）回复(0）举报 2023-10-14

7eumitmz2#

您可以在父组件中使用“删除”操作：

import Index from './Index.js';
 const [siteHTML, setSiteHTML] = useState(null);

 //...... your code below in the function, maybe in useEffect
 if (typeof window === 'undefined')
  { 
    axios(config) // the actual request I'm waiting on
    .then(function (response) {
      setSiteHTML(response.data) // the element I'm adding to the react //component
    })
    .catch(function (error) {
      console.log(error);
    });
  }
  return (<>{siteHTML && <Index siteHTML={siteHTML} />}<>)

Index.js文件

const Index = (props) => ( 
const {siteHTML} = props;
<div>
  <h1>Site HTML:</h1>
  <div>
    { siteHTML }
  </div>
</div>
)


export default Index;

赞(0）回复(0）举报 2023-10-14

我来回答

javascript 如何等待React组件的导出，直到收到请求,(Shopify App开发)

2条答案

相关问题

热门标签

最新问答