子コンポーネントからの親の反復更新状態

Question

親から子コンポーネントを受け取った子コンポーネントがありますが、子コンポーネントのイベント（ボタンクリック）で新しい子コンポーネントでsetStateを再度実行します。したがって、親はリスト内のすべての項目を子に渡します。子プロップでは、ボタンはリスト内の項目を削除します。しかし、リストアイテムもビューから削除されるように状態をどのように更新できますか？これは私のコードです：

コメントはサーバーでは削除されますが、状態を更新することでコメントをコンポーネントビューから削除したいと思います。

Answer 1

コンポーネントからコメントを削除する場合は、親stateを更新する必要があります。

これを行うには、新しいメソッドdelete(id)をParentコンポーネントに作成し、削除したアイテムを状態から削除します。

const Parent = React.createClass({ 
    getInitialState:function(){ 
     return { 
      items: [] 
     }; 
    }, 
    componentWillMount:function(){ 
     this.setState({ 
      items: [ 
      {id: 1,name: "Name 1"}, 
      {id: 2,name: "Name 2"}, 
      {id: 3,name: "Name 3"} 
      ] 
     }) 
    }, 
    delete(id){ 
     // axios.post(...) 
     let items = this.state.items.filter(item => item.id !== id); 
     this.setState({items}); 
    }, 
    render() { 
     return (
      <div> 
       <Child1 
        data={this.state.items} 
        handleClick={this.delete} // Pass the method here 
       /> 
      </div> 
     ); 
    } 
}); 

function Child1(props){ 
    return(
     <div> 
      { props.data.map((comment,id) =>(
        <p key={id}> 
         {comment.name} 
         <Delete 
          data={comment.id} 
          handleClick={() => props.handleClick(comment.id)} // Pass the id here 
         /> 
        </p> 
       ) 
      )} 
     </div> 
    ) 
} 

class Delete extends React.Component { 
    constructor(props) { 
     super(props); 
    } 
    render() { 
     return <button onClick={this.props.handleClick}>Delete</button>; 
    } 
} 

jsfiddle