Question

我希望你能提供帮助。

我无法记住我在 deleteHandler 函数中获得代码片段的位置。它会从JSON数组中删除相关的 listdata 项，并按预期重新渲染。我只是不明白它在做什么。它是特定的React语法吗？这是我不知道的基本内容吗？

我知道 state.listdata.splice（id，1）; 行获取当前的JSON对象，但是箭头函数做了什么？什么回来了？我对它感到非常困惑。

非常感谢任何帮助。

＆＃13;

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"));

＆＃13;

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

＆＃13;

Answer 1

1）关于setState

React中的

setState函数看起来像这样：

setState(partialState, callback)

partialState 可能是：对象，函数或null。

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

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

并且使用arrow func（es6），它们看起来像

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

在特定情况下，箭头func仅用于简短

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>

<强>＆GT; 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>

<强>＆GT; 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的元素。您不应该混淆listdata item.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个节点。

当您更新组件的SELECT c.country_id, COUNT(DISTINCT CASE WHEN u2.user_id IS NOT NULL THEN u.user_id END) as has_contact_that_is_user , COUNT(distinct CASE WHEN u2.user_id is null AND u.user_id IS NOT NULL THEN u.user_id END) as has_no_contact_that_is_user FROM Country c LEFT JOIN users u ON(c.country_id = u.country_id) LEFT JOIN contacts co ON(co.user_id = u.user_id) LEFT JOIN Users u2 ON(u2.user_msisdn = co.contact_msisdn) GROUP BY c.country_id时，它会被重新呈现，并且您会看到该项目已被删除。

这段代码是用es2015编写的，所以如果它对你不熟悉，最好从阅读有关新语法的内容开始。

Answer 3

id从listdata数组中删除索引等于id的1个元素。例如，如果state.listdata.splice(id, 1)等于0，则在应用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>

要：

var casper = require("casper").create();
var data = "";

casper.start("http://www.naver.com",function(){
      data = require('utils').dump(this.getElementsAttribute("#name","cy"));
});

casper.run();

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

3 个答案: