reactjs - 如何将 this.state.songs 更新到歌曲列表

Question

我无法更新需要从ongsList获取值的状态歌曲。如何将歌曲更新到songsList ？这与组件的生命周期有什么关系吗？运行以下代码时，会出现“songsList is undefined”错误。 const SongList 在 render 中。

    import React, { Component } from 'react';
    import logo from './components/Logo/box8.png';
    import './App.css';
    import SearchBox from './components/SearchBox/SearchBox';
    import SongCards from './components/SongCards/SongCards';
    import 'tachyons';
    import axios from 'axios';

    class App extends Component {
          state = {
            songs : [],
          searchField: '',
          entries: []
          };



      componentDidMount() {
          axios.get(`https://itunes.apple.com/in/rss/topalbums/limit=100/json`)
          .then(response => 
            {this.setState({ entries: response.data.feed.entry });

          });
        }

    onSearchChange=(event)=>{
      this.setState({songs : songsList})
        this.setState({searchField : event.target.value})
        const filteredSongs = this.state.songs.filter(song =>{
          return song.title.toLowerCase().includes(this.state.searchField.toLowerCase())
        });
     }

       render(){

          const songsList = this.state.entries.map(entries => {
          return (
            <SongCards 
              key={entries.id.label} 
              artist={entries["im:artist"].label}
              image={entries["im:image"][2].label}
              link={entries.id.label}
              price={entries["im:price"].label}
              date={entries["im:releaseDate"].label}
              title={entries.title.label}
            />
          );
        });



        return (
          <div className="App">

            <header className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
            </header>
            <SearchBox searchChange= {this.onSearchChange}/>
            {songsList}


      </div>
    );
  }
}

export default App;

Answer 1

感谢您的所有回复。我终于成功了。

import React, { Component } from 'react';
import logo from './components/Logo/box8.png';
import './App.css';
import SearchBox from './components/SearchBox/SearchBox';
import Albums from './components/Albums/Albums';
import Scroll from './components/Scroll/Scroll';
import 'tachyons';
import emoji from 'emoji-dictionary';
import axios from 'axios';

class App extends Component {
      state = {
        show:false,
        songs : [],
      searchField: '',
      };


  componentDidMount() {
      axios.get(`https://itunes.apple.com/in/rss/topalbums/limit=100/json`)
      .then(response => 
        {this.setState({songs:response.data.feed.entry });
         });
    }

itunesPageLoader=()=>{
  this.setState({show:false})
}

onSearchChange=(event)=>{
    this.setState({searchField : event.target.value})

 }

   render(){

    const filteredSongs = this.state.songs.filter(song =>{
      return 
 song.title.label.toLowerCase().includes(this.state.searchField.toLowerCase())
    })

 return (

      <div className="App">


        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
        </header>
        <SearchBox searchChange= {this.onSearchChange}/>
        <Scroll >
        <Albums songs={filteredSongs}/>
        </Scroll>
        <footer className="pv4 ph3 ph5-m ph6-l red">
            <small className="f6 db tc">© 2018 <b className="ttu">Box8 Inc</b>., All 
     Rights Reserved</small>
            <div className="tc mt3">
               {`Made with  ${emoji.getUnicode("purple_heart")} by Renjith`}
            </div>
        </footer>


      </div>
    );
  }
}

export default App;