在承诺完成后使用completion变量

Question

以下是代码：

import React from 'react';
import { Link } from 'react-router-dom';

import Main from '../layouts/Main';

import Cell from '../components/Stats/nCell';
import init from '../data/stats';

const promiseHandle = async () => {
  Window.data = await init();
};

promiseHandle();

const Stats = () => (
  <Main
    title="Stats"
    description="Some statistics about Ahammad Shawki and ahammadshawki8.github.io"
  >
    <article className="post" id="stats">
      <header>
        <div className="title">
          <h2 data-testid="heading"><Link to="/stats">Publications</Link></h2>
        </div>
      </header>
      <p className="rec-p"> Please accept my sincere apologies for the inconvenience.
        At the moment, I am working on my Publication API for this website
        so may not be able to find all of my articles here.
        But the great news is that you can always read all of my articles on <a href="https://ahammadshawki8.hashnode.dev/">HashNode</a>.
      </p>
    </article>
    {Window.data.map((post) => (
      <Cell
        data={post}
        key={post.title}
      />
    ))}
  </Main>
);

export default Stats;

由于我使用的是一个承诺，在这里，Window.data已经被声明为异步方式。但是在react JSX {}中，代码是同步的。因此，它在完成导致错误的承诺之前运行。我想履行诺言。如何解决这个问题？提前谢谢。

Answer 1

您需要在组件中移动调用并使用useEffect和useState，或者在组件中进行轮询。

const Stats = () => {
 const [data, setData] = useState([])

 useEffect( () => {
  const promiseHandle = async () => {
    setData(await init());
  };
  promiseHandle();
 }, [])