在等待承诺解决反应时添加一个微调器

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 在其他一些 file.I m 中将其导入组件中。

Answer 1

TLDR

How about use useState and useCallback for that action

回答

根据反应，使用 State 加载操作是正确的用例。
所以，什么时候开始功能，使用可以 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>
  );
};

参考

Example of loading

等

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

在等待承诺解决反应时添加一个微调器

Add a Spinner while waiting for promise to resolve in react

spinner

reactjs

react-bootstrap

TLDR

回答

参考

等