在等待 promise 在反应中解决时添加一个 Spinner

Question

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 在其他文件中。我将它导入到一个组件中。

Answer 1

TLDR

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

回答

在反应方面，使用State进行加载操作是正确的用例。
所以，当启动 function 时，可以使用setLoading(true)并在操作后使用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

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