reactjsに配列として格納されているアイテムを削除するにはどうすればよいですか？

Question

は、Web API経由でアイテムを表示する必要があります。応答をsuceessfully得て、項目を表示しました。しかし、私はどのようにリストから項目を削除するか分からない。

すべてのアイテムに削除アイコンを表示しましたが、アイテムを状態から削除することはできません。私は何か悪いことはありますか？私を助けてください。

import React from 'react'; 

class App extends React.Component { 
    constructor() { 
    super(); 

    this.state = { 
     posts: [] 
    } 

    this.UserList = this.UserList.bind(this); 
    this.setStateHandler = this.setStateHandler.bind(this); 

this.setDeleteHandler = this.setDeleteHandler.bind(this); 
    } 
    componentDidMount() { 
    this.UserList(); 
    } 
setStateHandler() { 
    alert(0) 
     var item = { 
     "url": "http://www.imdb.com/title/tt4937812/", 
     "title": "PAMMAL K SAMBANTHAM", 
     "imdb_id": "tt4937812", 
     "type": "Film", 
     "year": "2015" 
     }; 
     var myArray = this.state.posts; 
     myArray.push(item) 
     console.log(myArray) 
     this.setState({posts: myArray}) 
    }; 
    setDeleteHandler() { 
    alert("idris") 

    }; 
    UserList() { 
    alert(1) 
     fetch('http://www.theimdbapi.org/api/person?person_id=nm0352032').then(response => { 
     return response.json(); 
    }).then(data => { 
     const posts = data.filmography.soundtrack; 
     this.setState({posts}); 
    }); 

    } 

    render() { 
    return (
     <div> 
     <div> 
      { 
      this.state.posts.map((item, i) => { 
       return <Content item={item} key={i}/> 
      }) 
      } 
     </div> 
     <button onClick = {this.setStateHandler}>SET STATE</button> 

     </div> 
    ); 
    } 
} 

class Content extends React.Component { 
    render() { 
    return (
     <div> 
     <table> 
     <tbody> 
<tr> 
<td>{this.props.item.title}</td> 
<td>{this.props.item.type}</td> 
<td>{this.props.item.type}</td> 
<td><button onClick = {this.setDeleteHandler}>Delete</button></td> 


</tr> 
</tbody> 
     </table> 

     </div> 

    ); 
    } 
} 

export default App; 

誰もがその後、あなたの中に、この

this.state.posts.map((item, i) => { 
    return <Content item={item} key={i} deleteHandler={this.setDeleteHandler(i)}/> 
}) 

そして、のようなあなたのcontentコンポーネントにこの関数を渡すあなたのsetDeleteHandler

このような

setDeleteHandler(index) { 
    return() => { 
     let posts = [...this.state.posts]; 
     posts.splice(index,1); 
     this.setState({posts}); 
    } 
}; 

を行い、この

Answer 1

に助けてくださいcontentコンポーネントはこの関数をliこの

<td><button onClick = {this.props.deleteHandler}>Delete</button></td>