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

在您的 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 的元素。您不应混淆 listdata item.id 和项目 index。为了让您的代码正常工作，您需要在 deleteHandler.

中传递 index

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

另一件事是你只用一个参数调用 deleteHandler - item 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 和 return React.DOM 个节点。

当您更新组件的 state 时，它会重新呈现，您会看到该项目已被删除。

此代码是用 es2015 编写的，因此如果您不熟悉它，最好先阅读一些有关新语法的内容。

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

Answer 3

1) 关于setState

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

setState(partialState, callback)

其中 partialState 可能是：对象、函数或 null。

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

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

和 arrow func (es6) 一样，看起来像

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

在你的特殊情况下，箭头函数只是为了简称

2）关于拼接

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

但这是不好的做法，因为它会改变 component.And 的状态，这会导致错误、问题和不可预测的行为。 你不应该改变你的状态！

为了避免这种情况，您可以通过 slice() 复制数组，因为 slice returns 新数组。

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

3)关于deleteHandler和数据结构

deleteHandler 无法正常工作，并且仅适用于第一个 position.And 如果您的数据看起来像这样：

 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

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

React JS - How does this function work to delete JSON data?

javascript

json

state

event-handling

reactjs