我希望你能帮到忙。
我不记得我从哪里得到 deleteHandler 函数中的代码片段。它从 JSON 数组中删除相关的列表数据项，并按预期重新呈现。我只是不明白它在做什么。它是特定的 React 语法吗？是我忘记的简陋的东西吗？
我知道state.listdata.splice（id， 1）; line获取当前的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） 关于 setState
React 中的 setState 函数看起来像这样：
setState(partialState, callback)
其中 partialState 可以是：对象、函数或空。
在您的特定情况下，您使用函数，它返回状态变量的对象。
setState(function(state){ return {some:data} })
而对于箭头函数（ES6），同样看起来像
setState(state=> { return {some:data} })
在你特定的情况下，箭头函数简称
2） 关于拼接
在处理程序中，您使用 JS func splice（） 从状态的数组中删除元素;
但这是不好的做法，因为它会改变组件的状态。它会导致错误，问题和不可预测的行为。你不应该改变你的状态！
为了避免这种情况，你可以通过slice（）复制你的数组，因为slice会返回新的数组。
var newArray = state.listdata.slice()
newArray.splice(index, 1);
3） 关于删除处理程序和数据结构
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示例
或者您可以按索引删除
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示例
在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 - 项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 编写的，所以如果你对它来说是新手，最好从阅读一些关于新语法的东西开始。
state.listdata.splice(id, 1)从数组中删除 1 个索引等于 id 的元素listdata。例如，如果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>