React.js:渲染时微调器动画停止

Question

我做了一个简单的微调器，它将在过程中显示。动画应该一直运行，直到表被渲染，但是我的微调器动画在获取数据时工作，但是在渲染表之前，它只是停留了几秒钟。我不确定是不是因为数据量太大，渲染过程很慢

我正在使用react钩子...

 useEffect(async () => {
    if (spinner === null) {
      const tor = await axios.get("http://localhost:8080/api/tor");
      const uk = await axios.get("http://localhost:8080/api/uk");
      const ny = await axios.get("http://localhost:8080/api/ny");
      setInfo({
        tor: tor.data,
        uk: uk.data,
        ny: ny.data,
      });

      setSpinner(false);
    }
  }, []);
  let tables = null;

  if (info.tor != null) {
    console.log(info);
    tables = (
      <Container>
        <Element name="tor">
          <br />
          <h1 className="display-4">Toronto</h1>
          <Table info={info.tor} />
        </Element>
        <Element name="uk">
          <br />
          <h1 className="display-4">London</h1>
          <Table info={info.uk} />
        </Element>
        <Element name="ny">
          <br />
          <h1 className="display-4">New York</h1>
          <Table info={info.ny} />
        </Element>
      </Container>
    );
  }

  return (
    <div>
      <SearchContainer />
      {spinner === true || spinner === null ? (
        <Standby />
      ) : (
        <React.Fragment>{tables}</React.Fragment>
      )}
    </div>
  );

Answer 1

根据文档，在这里：https://github.com/facebook/react/issues/14326

• Consider hook

1. as
   1. ：https://reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect

   ，尝试重构钩子中的异步函数代码

Answer 2

正如上面的帖子所描述的，我正在尝试可视化您的解决方案

useEffect(() => {
  let isCancelled = false;
  setSpinner(true);

  async function test() {
     tor = await axios.get('http://localhost:8080/api/tor');
     uk = await axios.get('http://localhost:8080/api/uk');
     ny = await axios.get('http://localhost:8080/api/ny');
    
     setInfo({
      tor: tor.data,
      uk: uk.data,
      ny: ny.data,
    });
     
  }

  if (!isCancelled) {
    test();
    setSpinner(false);
  }

  return () => {
    isCancelled = true;
  };
}, []);