页面渲染 点击删除

//src/components/Item.js
import React from 'react';
import '../Item.css'
class Item extends React.Component{
    constructor(props){
        super(props)
    }
    render(){
        return (
            <div onClick={this.handleClick.bind(this,this.props.data.id)} className="item">
                <img className="cover" src={this.props.data.coverImgUrl} />
                <p className="name">{this.props.data.name}</p>
            </div>
        )
    }
    handleClick=(id)=>{
        /* 在子组件调用方法，向组件传参 */
        this.props.deleteItem(id)
        console.log(id)
    }
}
export default Item;

//src/App.js
import React from 'react';
import Item from './components/Item'
import axios from 'axios'
import './App.css'
class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      playlists:[]
    }
  }
  render(){
    return (
      <div className="container">
        {/* 子组件的属性接收父组件传递过来的方法 */}
          {this.state.playlists.map(item=>{
          return (
            <div key={item.id}>
              <Item data={item} deleteItem = {this.handleDelete.bind(this)}></Item>
            </div>
          ) 
        })}
     </div>
    )
  }
  handleDelete(id){
    console.log(id)
    var playlists = this.state.playlists.filter(item=>item.id !== id)
    this.setState({
      playlists
    })
  }
  componentDidMount(){
    var url = "https://music.aityp.com/top/playlist";
    axios.get(url).then(res=>{
      // console.log(res.data.playlists)
      this.setState({
        playlists:res.data.playlists
      })
    })
  }
}
export default App;