2017-09-29 163 views
0

我是新的反應,現在我有一個問題。我不知道如何從數組中刪除一個對象。每篇文章都有一個刪除按鈕。如果我按下刪除按鈕,我console.log,它顯示正確的對象。無法從數組中刪除對象

當我使用拼接時,它會隨機刪除並在2次點擊後清空我的整個數組。我需要用什麼來刪除正確的對象,如console.log顯示我?

對象被插入到另一個組件中並呈現。

這裏是我的代碼:

class Article extends React.Component { 
    constructor(props){ 
    super(props); 
    this.state = { 
     deleteArray: this.props.entireArray 
    }; 
    this.onClickHandler = this.onClickHandler.bind(this); 
} 

    onClickDelete =() => { 
    /* this.setState({ 
    deleteArray: this.props.articles.splice(this.props.key, 1) 
    }); */ 
    console.log("delete", this.props.articles) 
} 

    getArray =() => { 
      this.props.sendData(this.state.deleteArray); 
    } 


    onClickHandler = (e) => { 
     e.preventDefault(); 
     this.onClickDelete(); 
     this.getArray(); 
    } 

    render() { 

     return (
     <div className="articleContainer"> 
      <div className="articleTitle"> <Link to={ 
      { 
       pathname: "/" + this.props.articles.url + ':' + this.props.articles.id, 
       state: {singleTitle: this.props.articles.title, 
         singleDate: this.props.articles.date, 
         singleText: this.props.articles.text 
       } 
      } 
      }>{this.props.articles.title}</Link></div> 
      <button onClick={this. onClickHandler} type="submit">Delete</button> 
      <div className="articleDate"><FontAwesome name="clock-o"/> {this.props.articles.date}</div> 
      <TextTruncate 
      className="articleTruncate" 
      line={1} 
      truncateText="…" 
      text={this.props.articles.text} 

      /> 

     </div> 
    ); 
    } 
    } 

回答

0

這是因爲剪接返回僅包含已刪除項目(S)的新數組。因此,當你設置一個新的狀態時,你只將被刪除的項目分配爲deleteArray屬性的新狀態。

如果你想保留原來的陣列並且只刪除一個項目

let articles = this.props.articles; 
this.props.articles.splice(this.props.key, 1); 
this.setState({ 
    deleteArray: articles 
});