Question

我的API中的道具中有一个对象数组，但是我需要修改此对象数组中的元素，然后将其传递给应用程序的播放器。我可以成功获取对象数组，但是当我尝试修改元素并将数据设置为状态时，新状态最终仅包含列表的最后一项。这是我的代码，

        if(musicitem.musics){
            if(musicitem.musics.length === 0){
                this.setState({musicLimited:true })
            }
            else{
                return musicitem.musics.map((item, index)=>{
                    this.setState({
                        musics:[
                            ...musics,
                            {
                                url:apiConstants.API_MUSIC_FILES+item.url,
                                cover:apiConstants.API_MUSIC_FILES+item.cover,
                                artist:item.artist,

                            }
                        ]
                    })
                });
            }
        }

我希望我的音乐状态具有一系列新构造的对象，但事实并非如此。它仅以预期在我的对象数组中的最后一个对象结束。这意味着，它实际上已经遍历了prop中的对象数组，但是下一个State仍然覆盖了上一个state。

Answer 1

您应该提及先前状态的属性（即音乐），以便在使用传播运算符时让setState知道。

您可以通过将第一个参数传递到this.setState()来访问以前的状态。

示例： this.setState(prevState => ({ music : [...prevState.music, {artist:item.artist}] }))

您的代码应像这样更新：

 if(musicitem.musics){
        if(musicitem.musics.length === 0){
            this.setState({musicLimited:true })
        }
        else{
            return musicitem.musics.map((item, index)=>{
                this.setState(prevState => ({
                    musics:[
                        ...prevState.musics, // use prevState
                        {
                            url:apiConstants.API_MUSIC_FILES+item.url,
                            cover:apiConstants.API_MUSIC_FILES+item.cover,
                            artist:item.artist,

                        }
                    ]
                }))
            });
        }
    }

使用setState动态填充对象数组

1 个答案: