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

Question

I'm having an issue re-rendering the DOM after a state change, Here is the code for the component:

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

I have a filter function that takes in a value from a text input and and filters the musicLibraryItems based on if the title has the value from the text input, I am doing that in the following function:

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
            })
        }
    })

}

I think the problem is that I am not changing the reference to the state variable so it isn't realizing that the state has been changed. I was wondering what the best way to mutate the state variable so that the values in the musicLibraryItems is put into this.state.musicLibraryItems so that it can be rendered on the page.

Answer 1

you could try

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

and change the filter to not change the state

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;
}

You shouldn't store jsx elements on your state. If you are concerned about re-calculation of the list, try reselect

Answer 2

More like what @Murilo already mentioned, for filters you wouldnt want to add them to state, is more calculated state...just added a working sample

 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>