保存从 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 is an array of objects having name and year.

const musicList = [{ name: 'abc', year:1990
}, { name:'xyz', year:1989' } ]

I want to save the data returned from getRandomMusic function and pass it to SomeComponent component.

Answer 1

You could use 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>
  )
}