时间戳

首页 > 解决方案 > 在等待承诺解决时添加一个 Spinner

reactjs - 在等待承诺解决时添加一个 Spinner

问题描述

const fetchMusic= () => {
  return new Promise((resolve) =>
    setTimeout(() => {
      const music = musicList.sort(() => 0.5 - Math.random()).slice(0, 4);
      resolve({ data: music});
    }, 300)
  );
};

export default fetchMusic;


const getRandomMusic = () => {
  return fetchMusic().then((result) => result.data);
};

const Button = (props) => {
  return (
    <div>
      <Button {...props} onClick={getRandomMusic.bind(this)} />
      <SomeComponent /> 
      <p>Some text here</p>
    </div>
  );
};

我想在等待 promise 解决时添加一个微调器。fetchMusic 在其他文件中。我将它导入到一个组件中。

标签： reactjsspinnerreact-bootstrap

解决方案

TLDR

怎么样使用useState和useCallback那个动作

回答

在反应方面，State用于加载动作是正确的用例。
所以，什么时候启动函数，使用cansetLoading(true)和after action就可以setLoading(false)实现加载效果了


const fetchMusic= () => {
  return new Promise((resolve) =>
    setTimeout(() => {
      const music = musicList.sort(() => 0.5 - Math.random()).slice(0, 4);
      resolve({ data: music});
    }, 300)
  );
};

export default fetchMusic;

const Button = (props) => {
  const [loaidng, setLoading] = useState(false);
  const getRandomMusic = useCallback(() => {
      setLoading(true)
      return fetchMusic().then((result) => {
        setLoading(false);
        result.data
      });
  },[]);
  return (
    <div>
      <Button {...props} onClick={getRandomMusic.bind(this)} />
      {loading && <Sipinner/>}
      <SomeComponent /> 
      <p>Some text here</p>
    </div>
  );
};

参考

  1. 加载示例

ETC

如果您还有其他问题。请给我评论。

推荐阅读