如何使用键从状态中删除项目

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