狀態更新后，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>