保存從 promise 返回的數據並將其傳遞給反應中的另一個組件

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>
  );
};

musicList 是一組具有名稱和年份的對象。

const musicList = [{ 名稱：'abc'，年份：1990
}，{名稱：'xyz'，年份：1989'}]

我想保存從 getRandomMusic function 返回的數據並將其傳遞給 SomeComponent 組件。

Answer 1

您可以使用useState ( doc )

const Button = props => {
  const [musicList, setMusicList] = React.useState([])

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

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