保存从 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>
  )
}