状态更新后，React不重新发送DOM

Question

状态更改后，我在重新渲染DOM时遇到问题，这是该组件的代码：

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

我有一个过滤器函数，该函数从文本输入中获取一个值， musicLibraryItems根据标题是否具有文本输入中的值来过滤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元素。 如果您担心列表的重新计算，请尝试重新选择

Answer 2

就像@Murilo已经提到的那样，对于过滤器，您不想将其添加到状态，而是更多的计算状态...只是添加了一个工作示例

 const MusicLibraryItem = ({music}) => { return <li>{music.title}</li> } const lotMusic = [{title: 'Awesome', id: '12121'}, {title: 'Kitchen', id: '121'}, {title: 'Golden', id: '21'}, {title: 'Beach', id: '121'}]; class App extends React.Component{ constructor(){ super() this.state = {musicGet: lotMusic,filterValue: ''} this.updateFilter = this.updateFilter.bind(this); } updateFilter(event) { const name = event.target.name; this.setState({[name]: event.target.value}); } 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}/> ); } }); return musicLibraryItems; } render(){ return ( <div> <h2>Test </h2> <input type="text" onChange={this.updateFilter} name="filterValue" value={this.state.filterValue}/> <ul>{this.filterMusicLibrary(this.state.filterValue)}</ul> </div> ) } } ReactDOM.render(<App/>, document.getElementById('app')) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="app"> </div>