Question

嗨，这是我在App.js中的代码

var music = {
  name: "Starboy",
  artist: "The Weeknd",
  albumArt: "",
  length: "4:20",
  audioURL:"",

};

export default class App extends Component 
{
  render() {
  return (
    <Image style={styles.albumArt} source={{ uri:music.albumArt }} />
  );
  }
};

lastFM.js中还有另一个功能

export function getAlbumArt(albumName) 
{
    fetch('http://ws.audioscrobbler.com/2.0/?method=album.search&album='+albumName+'&api_key=MY_API_KEY&format=json&limit=1')
    .then((response) => response.json())
    .then((result) => {
        const image = result.results.albummatches.album[0].image[2]['#text'];
        console.log(image);
        return image;
    })
    .catch((error) => {
        console.log("ERROR: "+error);
    });
}

如何在 App.js 中更新 music.albumArt ，然后在 App.js渲染中重新渲染图像强>？

Answer 1

这可能会有所帮助。当您更改组件的状态时，会进行重新渲染。因此，一旦从API获取数据，我们就在这里更新状态。

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      name: "Starboy",
      artist: "The Weeknd",
      albumArt: "",
      length: "4:20",
      audioURL: ""
    };
  }
  componentDidMount(){
    fetch('http://ws.audioscrobbler.com/2.0/?method=album.search&album='+albumName+'&api_key=MY_API_KEY&format=json&limit=1')
    .then((response) => response.json())
    .then((result) => {
        const image = result.results.albummatches.album[0].image[2]['#text'];
        console.log(image);
        this.setState({...this.state, albumArt: image });
    })
    .catch((error) => {
        console.log("ERROR: "+error);
    });
  }
  render() {
    return <Image style={styles.albumArt} source={{ uri: this.state.albumArt }} />;
  }
}

渲染后如何更新变量？

1 个答案: