Question

我只是不知道为什么它不起作用。这是我的状态。

    const [albums, setAlbums] = useState([])
    const [artist, setArtist] = useState([])
    const [artistImages, setArtistImages] = useState([])

我在这里设置状态。

     axios.get(`/music/api/artist/1/`)
            .then(res => {
                setAlbums(res.data.albums);
                setArtist(res.data);
                setArtistImages(res.data.about_images);
                console.log(res.data.albums)
            }).catch(err => {
                console.log(err)
            })

这是我从服务器得到的响应

   BgImage: "http://127.0.0.1:8000/media/images/001_3uKSvDp.jpg"
   about_images: Array(1)
   0: {id: 1, image1: 
   "http://127.0.0.1:8000/media/images/1034349_xl06j1h.jpg", 
   image2: null, image3: null, image4: null, …}
   length: 1
   __proto__: Array(0)
   albums: Array(3)
   0: {id: 1, album_name: "Fearless (Taylor's Version)", artwork: 
  "http://127.0.0.1:8000/media/images/001.jpg", artist: "Taylor Swift"}
   1: {id: 7, album_name: "Reputation", artwork: 
   "http://127.0.0.1:8000/media/images/001_1.jpg", artist: "Taylor Swift"}
   2: {id: 8, album_name: "1989", artwork: 
   "http://127.0.0.1:8000/media/images/002.jpg", artist: "Taylor Swift"}
   length: 3
   __proto__: Array(0)
   artist_name: "Taylor Swift"
   born: "1989-12-13"
   id: 1
   image: "http://127.0.0.1:8000/media/images/011.jpg"

我遇到的问题只是 setAlbums 没有设置。所有其他状态设置为 setArtist setArtistImages 只是专辑没有设置。即使我 console.log(res.data.albums) 它返回专辑。但 setAlbum 不起作用。我就是不知道为什么....

Answer 1

试试这个

axios.get(`/music/api/artist/1/`)
            .then(res => {
                const newAlbums = [...albums].concat(res.data.albums)
                setAlbums(newAlbums);
                setArtist(res.data);
                setArtistImages(res.data.about_images);
                console.log(res.data.albums)
            }).catch(err => {
                console.log(err)
            })

ReactJS：使用状态不适用于仅一种状态

1 个答案: