キーを使用して状態からアイテムを削除する方法

Question

状態からアイテムを削除します。

私はkeyというID（this.props.result._id）を削除したいと思います。

fetch（trash関数）の.thenの結果としてこの関数を実行したいと考えています。

これはどのように達成できますか？

class Data extends React.Component { 
    render(){ 
    const { hits } = this.props 
    this.components = [] 
    return (
     <div> 
     {hits.map(hit => 
      <ItemResult ref={ref => this.components.push(ref)} 
      key={hit._id} result={hit} />)} 
     </div> 
    ) 
    } 
} 

class ItemResult extends React.Component { 
constructor(props) { 
    super(props); 
    this.deleteItem = this.deleteItem.bind(this); 
    this.state = { 
     item: props.result, 
    }; 
    } 
    deleteItem = event => { 
    // console.log('This gives undefined', item) 
    this.setState({ 
     item: [] 
    }) 
    } 
    render() { 
    return (
     <div> 
     <button onClick={this.deleteItem.bind(this)}> Delete </button> 
      <h2> This appears {this.props.result.title}</h2>    
    </div> 
    ); 
    } 
} 

Answer 1

propsキーを削除することはできません。そこにあなたの場合に2つの方法です：

1. コールあなたの親コンポーネントから任意のコールバック（あなたはこの小道具指定しているが）、および/取り外しが
2. それを修正するが、あなたがこの小道具をpalce場合はそれが良くなりますコンポーネントのstate。そうすれば、あなたは望むようにそれを扱うことができ、小道具には中継しません。

Answer 2

キーは内部反応性のプロパティです。私があなただったら、おそらくこれについては、それぞれの要素に動的IDを作成し、それを削除しようとするときにその特定のIDに対処することです。

class Data extends React.Component { 
    render(){ 
const { hits } = this.props 
this.components = [] 
return (
    <div> 
    {hits.map(hit => 
     <ItemResult ref={ref => this.components.push(ref)} 
     key={hit._id} id="{'hitNum' + hit._id}" result={hit} />)} 
    </div> 
    ) 
    } 
} 

class ItemResult extends React.Component { 
constructor(props) { 
    super(props); 

    this.state = { 
    }; 
    } 
    render() { 
    const { result } = this.props 
    return (
     <div key={result._id}> 
      <h1>{result._source.title}</h1> 
      <DeleteButon/> 
     </div> 
    ); 
    } 
} 

class DeleteButon extends React.Component { 
    constructor(props) { 
    super(); 
    this.state = { 
    } 
    } 

    trash() { 
    return fetch(DATA_API + this.props.result._id + '/', { 
    method: 'PUT', 
    body: JSON.stringify({deleted:true})}) 
     .then(function(res){ return res.json(); }) 
      //.then remove the id={'hitNum' + hit._id} it belongs to in ItemResult 
    } 
    render() { 
    return (
    <button className="trash" onClick={this.trash} > 
    Delete item # {this.props.result._id} 
    </button> 
    ); 
    } 
} 

Answer 3

Reactを使用して、あなたの親を変更する問題を解決するための慣用的な方法は、あなたのコンポーネントにコールバックを伝承することです。

のでDeleteButtonコンポーネントを定義する際に、それは次のようになります。

<DeleteButton onDelete={() => console.log('handle delete')} /> 

あなたが...しかし

を小道具を変更したい場合は、あなたが再レンダリングトリガする場合があります異なる小道具を持つ親が渡されます。これは、リアクトが繁栄する方法です。情報の一方向の流れ。 ItemResultの削除によって中央の状態が変更された場合、すべての小道具はその中央の状態から派生します。コンポーネントを再レンダリングさせるだけで、新しい小道具セットが作成されます（所望のItemResultはありません）。

読む程度。..

• Reduxのは、この問題を解決する現在、慣用的な方法です：https://www.codementor.io/reactjs/tutorial/intro-to-react-redux-pros