React JS - 這個函數如何工作來刪除JSON數據？

Question

我希望你能幫上忙。

我不記得我在deleteHandler函數中得到的代碼片段。它會從JSON數組中刪除相關的listdata項目並按預期進行重新呈現。我只是不明白它在做什麼。它具體的React語法？我不知道它是不是最基本的東西？

我知道state.listdata.splice（id，1）;線獲取當前的JSON對象，但箭頭函數做什麼？什麼是返回？我很困惑。

任何幫助，非常感謝。

var AppFront = React.createClass({ 
 
    getInitialState:function(){ 
 
    return{ 
 
     listdata: [ 
 
      {"id":1,"name":"Push Repo","description":"Job No 8790","priority":"Important"}, 
 
      {"id":2,"name":"Second Note","description":"Job No 823790","priority":"Important"} 
 
      ] 
 
    } 
 
    }, 
 
    deleteHandler: function(e,id){ 
 
    this.setState(state => { 
 
     state.listdata.splice(id, 1); 
 
     return {listdata: state.listdata}; 
 
    }); 
 
    }, 
 
    render: function(){ 
 
    var listDataDOM = this.state.listdata.map((item,index) => {return (<li key={item.id}> 
 
     {item.name} 
 
     <button onClick={()=>this.deleteHandler(item.id)}>delete</button> 
 
     </li>)}); 
 
    return(
 
     <div> 
 
     <h1>To-do List</h1> 
 
     <ul> 
 
     {listDataDOM} 
 
     </ul> 
 
     </div> 
 
    ); 
 
    } 
 
    }); 
 
    
 
    ReactDOM.render(<AppFront />,document.getElementById("container"));

<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>

Answer 1

1 ）關於setState

React的setState函數看起來像這樣：

setState(partialState, callback) 

凡partialState可以是：對象，功能或無效。

在你的特定情況下，你使用函數，它返回一個狀態變量的對象。

setState(function(state){ return {some:data} }) 

與arrow func（ES6），同樣會像

setState(state=> { return {some:data} }) 

在YOUT特定情況下箭頭FUNC只用於短

---

2）關於拼接

在處理程序中，您使用JS func splic e（）從狀態的數組中移除元素;

但這是不好的做法，因爲它會改變組件的狀態，並且會引起錯誤，問題和不可預知的行爲。 你不應該改變你的狀態！

爲了避免您可以通過slice（）複製數組，因爲slice會返回新數組。

 var newArray = state.listdata.slice() 
     newArray.splice(index, 1); 

---

3）關於deleteHandler和數據結構

deleteHandler不工作正常，只爲第一位置的作品。如果你的數據看起來就像是：

listdata: [ 
      {"id":52,"name":"Push Repo","description":"Job No 8790","priority":"Important"}, 
      {"id":11,"name":"Second Note","description":"Job No 823790","priority":"Important"} 
      ] 

它不會在所有

工作正確的結果，你應該改變deleteHandler這樣：

deleteHandler: function(e,id){ 
     //find index of element 
     var index = this.state.listdata.findIndex(e=>e.id==id); 
     //copy array 
     var newAray = this.state.listdata.slice(); 
     //delete element by index 
     newAray.splice(index, 1); 
     this.setState({listdata: newAray}); 

    }, 

和按鈕

<button onClick={e=>this.deleteHandler(e,item.id)}>delete</button> 

>JSBIN example

，或者您可以通過索引刪除

deleteHandler: function(e,index){ 
     //copy array 
     var newAray = this.state.listdata.slice(); 
     //delete element by index 
     newAray.splice(index, 1); 
     this.setState({listdata: newAray}); 
    }, 
<button onClick={e=>this.deleteHandler(e,index)}>delete</button> 

>JSBIN example

Answer 2

在你AppFront組件你有state

{ 
     listdata: [ 
      {"id":1,"name":"Push Repo","description":"Job No 8790","priority":"Important"}, 
      {"id":2,"name":"Second Note","description":"Job No 823790","priority":"Important"} 
     ] 
    } 

它代表了你的組件的初始數據。每次更改state時，組件都會被重新渲染。

可以通過調用組件的setState方法改變state

在deleteHandler

deleteHandler: function(e,id){ 
    this.setState(state => { 
     // state.listdata - array of initial values, 
     state.listdata.splice(id, 1); 
     return {listdata: state.listdata}; // returns a new state 
    }); 
    } 

state.listdata.splice(id, 1) //刪除該數組具有索引的元素== ID。您不應該混淆listdataitem.id和項目index。爲了讓您的代碼正常工作，您需要通過index在您deleteHandler。

<button onClick={()=>this.deleteHandler(index)}>delete</button> 

另一件事是，你叫deleteHandler只有一個參數 - 項目index所以在你的定義應該是

deleteHandler: function(index){ 
    this.setState(state => { 
     // state.listdata - array of initial values, 
     state.listdata.splice(index, 1); 
     return {listdata: state.listdata}; // returns a new state 
    }); 
    } 

在你render方法您通過this.state.listdata迭代並返回各React.DOM節點。

當您更新組件的state時，它會被重新渲染，並且您看到該項目已被刪除。

此代碼寫在es2015所以如果它對你來說是新的，最好從閱讀有關新語法的東西開始。

Answer 3

state.listdata.splice(id, 1)從listdata數組中刪除1個索引等於id的元素。例如，如果id等於0，然後，施加state.listdata.splice(id, 1)，state.listdata將成爲後：

listdata: [   
     {"id":2,"name":"Second Note","description":"Job No 823790","priority":"Important"} 
     ] 

而正是這種陣列將通過該箭頭功能被返回。

銘記，那splice方法接收索引作爲第一個參數，但是你通過id財產存在，則很可能要更改此代碼：

<button onClick={()=>this.deleteHandler(item.id)}>delete</button> 

要：

<button onClick={()=>this.deleteHandler(index)}>delete</button>