如何使用鍵從狀態中刪除項目

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密鑰。有你的情況下，兩個辦法：

1. 呼叫從自己的父組件的任何回調（你在哪裏指定此道具）和刪除/修改它有
2. 但它會更好，如果你在一個訂貨量大這個道具組件的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')} /> 

如果你想改變，雖然道具..

那麼你可能要觸發重新呈現帶有不同道具的父母被傳遞下來。這就是React蓬勃發展的原因。信息的單向流動。如果移除一個ItemResult改變某個中央狀態，那麼所有道具都來自該中央狀態，您可以簡單地導致組件重新渲染，並且會有一套新的道具，但缺少所需的ItemResult。

閱讀..

• 終極版是解決這一問題的電流，慣用的方式：https://www.codementor.io/reactjs/tutorial/intro-to-react-redux-pros