javascript - 状态更新后 react 不重新渲染DOM

Question

我在状态更改后重新呈现 DOM 时遇到问题，这是组件的代码:

<ul>
    { this.state.musicLibraryItems }
</ul>

我有一个过滤器函数，它从文本输入中获取一个值，并根据标题是否具有文本输入中的值来过滤 musicLibraryItems，我在以下函数中执行此操作:

filterMusicLibrary(value) {
    let musicLibraryItems = [];
    this.state.musicGet.map(music => {
        if(music.title.includes(value)) {
            console.log(music.title)
            musicLibraryItems.push(
                <MusicLibraryItem key= {music.id} music={music} history={this.props.history}/>
            );
        }

    });
    console.log(musicLibraryItems, this.state.musicLibraryItems)

    this.setState((prevState) => {
        return {
            musicLibraryItems: musicLibraryItems
            })
        }
    })

}

我认为问题在于我没有更改对状态变量的引用，因此它没有意识到状态已更改。我想知道改变状态变量的最佳方法是什么，以便将 musicLibraryItems 中的值放入 this.state.musicLibraryItems 以便它可以呈现在页面上.

Answer 1

你可以试试

<ul>
  { this.filterMusicLibrary() }
</ul>

并将过滤器更改为不更改状态

filterMusicLibrary() {
    let musicLibraryItems = [];
    this.state.musicGet.map(music => {
        if(music.title.includes(this.state.title)) {
            console.log(music.title);
            musicLibraryItems.push(
                <MusicLibraryItem key= {music.id} music={music} history={this.props.history}/>
            );
        }

    });
    console.log(musicLibraryItems, this.state.musicLibraryItems);
    return musicLibraryItems;
}

你不应该在你的状态中存储 jsx 元素。如果您担心重新计算列表，请尝试 reselect