.setState（）：ボタンクリック時にオブジェクトの配列から人をフィルタリングする

Question

以下のコードでは、名前の横にある削除ボタンをクリックしたときに、最終的に組織図である人物を削除しようとしています。現時点では何も起こりません。私が一番近かったのは、削除ボタンのいずれかがクリックされたときに5人が削除されていたのですが、削除された人が削除されただけです。私はReactのエラーよりもJSのエラーを増やしているように感じます。

See the full code sandbox here.

すべてのヘルプ

をいただければ幸いです、ありがとうございました！

import React from "react"; 
import { Component } from "react"; 

const list = [ 
    { 
    name: "Person 1", 
    phone: "123-4567", 
    itemId: 11 
    }, 
    { 
    name: "Person 2", 
    phone: "123-4567", 
    itemId: 12 
    }, 
    { 
    name: "Person 3", 
    phone: "123-4567", 
    itemId: 23 
    }, 
    { 
    name: "Person 4", 
    phone: "123-4567", 
    itemId: 34 
    }, 
    { 
    name: "Person 5", 
    phone: "123-4567", 
    itemId: 45 
    } 
]; 

class Entry extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     list: list 
    }; 
    this.handleClick = this.handleClick.bind(this); 
    } 

    handleClick(e) { 
    this.setState({ 
     list: this.state.list.filter(function(person) { 
     return person !== e.target.value; 
     }) 
    }); 
    } 

    render() { 
    return (
     <div> 
     {this.state.list.map(item => 
      <tr key={item.itemId}> 
      <td> 
       {item.name} 
      </td> 
      <td> 
       {item.phone} 
      </td> 
      <td> 
       <a className="delete" onClick={this.handleClick} /> 
      </td> 
      </tr> 
     )} 
     </div> 
    ); 
    } 
} 

export default Entry; 

Answer 1

あなたのクリックイベントに値がない、あなたはのitemIdを渡すことができます：

onClick={() => this.handleClick(item.itemId)} 

次に、あなたの​​は、次のようになります。

handleClick(itemId) { 
    this.setState({ 
     list: this.state.list.filter(function(person) { 
     return person.itemId !== itemId; 
     }) 
    }); 
    } 

https://codesandbox.io/s/mo2l8z7469

Answer 2

//import React from 'react'; 
 
//import ReactDOM from 'react-dom'; 
 

 
const list = [ 
 
    { 
 
    name: "Person 1", 
 
    phone: "123-4567", 
 
    itemId: 11 
 
    }, 
 
    { 
 
    name: "Person 2", 
 
    phone: "123-4567", 
 
    itemId: 12 
 
    }, 
 
    { 
 
    name: "Person 3", 
 
    phone: "123-4567", 
 
    itemId: 23 
 
    }, 
 
    { 
 
    name: "Person 4", 
 
    phone: "123-4567", 
 
    itemId: 34 
 
    }, 
 
    { 
 
    name: "Person 5", 
 
    phone: "123-4567", 
 
    itemId: 45 
 
    } 
 
]; 
 

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

 
    this.state = { 
 
     list: list 
 
    }; 
 
    this.handleClick = this.handleClick.bind(this); 
 
    } 
 

 
    handleClick(item) { 
 
    let filterList = this.state.list.filter((user) => { 
 
     if(user.itemId === item.itemId) { 
 
      return false; 
 
     } 
 
     return true; 
 
    }) 
 
    this.setState({ 
 
     list: filterList 
 
    }); 
 
    } 
 

 
    render() { 
 
    return (
 
     <div> 
 
     <table> 
 
     <tbody> 
 
     {this.state.list.map(item => 
 
      <tr key={item.itemId}> 
 
      <td> 
 
       {item.name} 
 
      </td> 
 
      <td> 
 
       {item.phone} 
 
      </td> 
 
      <td> 
 
       <button className="delete" onClick={() => this.handleClick(item)} >Del</button> 
 
      </td> 
 
      </tr> 
 
     )} 
 
     </tbody> 
 
     </table> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <Entry />, 
 
    document.getElementById('app') 
 
);

delete

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="app"></div>

Answer 3

上記の溶液の両方がベストプラクティスの1違反していたり​​、私たちは、あなたが読むことができるプロップ上記定義した関数を渡す代わりに、内部の矢印機能を通過しているproperty initializer syntaxを、使用する必要があること、反応の本質的な慣行を言う必要がありますここに最後の段落のhttps://facebook.github.io/react/docs/handling-events.html

class Entry extends Component { 
    /* your handler method */ 
    handleDelete(itemId){ 
    return() => { 
     this.setState({ 
     /* logic to filter deleted item from old state */ 
     }); 
    } 
    } 
    /* render method */ 
    render() { 
    return (
     <div> 
     {/* passing onDelete callback */} 
     <a className="delete" onClick={this.handleClick(item.id)} /> 
     </div> 
    ) 
    } 
}