React JS - 这个函数如何删除 JSON 数据？

Posted 2023-02-22

【中文标题】React JS - 这个函数如何删除 JSON 数据？

【英文标题】：React JS - How does this function work to delete JSON data?

【发布时间】：2016-11-12 12:35:43

【问题描述】：

希望你能帮忙。

我不记得我在哪里得到 deleteHandler 函数中代码的 sn-p。它从 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>

【参考方案1】：

在您的 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) // 从数组中移除 index == 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写的，所以如果你对它不熟悉，最好从阅读一些关于新语法的东西开始。

【讨论】：

谢谢。很棒的解释。为什么我们不使用 e 或 item.id？

为什么需要它？

我使用 item.id 来获取对象在数组中的位置。我猜 e 是多余的。

您不能使用 item.id 来获取数组中项目的位置。您可以通过索引来完成。或使用state.listdata.find(item => item.id === id);

【参考方案2】：

state.listdata.splice(id, 1) 从listdata 数组中删除索引等于id 的1 个元素。比如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>

【参考方案3】：

1) 关于setState

React 中的 setState 函数看起来像这样：

setState(partialState, callback)

partialState 可能是：object、function 或 null。

在您的特定情况下，您使用函数，它返回状态变量的对象。

setState(function(state) return some:data  )

如果使用 arrow func (es6) ，看起来会是一样的

setState(state=>  return some:data  )

在您的特定情况下，箭头函数仅用于缩写

---

2) 关于拼接

在处理程序中，您使用 JS func splice() 从状态数组中删除元素；

但这是不好的做法，因为它会改变组件的状态。并且会导致错误、问题和不可预知的行为。 你不应该改变你的状态！

为了避免你可以通过 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

【讨论】：

效果很好。谢谢你。能否麻烦您解释一下 this.state.listdata.findIndex(e=>e.id==id) 语法？在那种情况下 findIndex 和 => 做了什么？

findIndex 如果回调返回 true，则返回元素的索引。与array.findIndex(function(element)return element.id==id ) 相同。当element.id==id返回true时，findIndex返回元素索引