希望您能提供帮助。
我不记得在deleteHandler函数中有什么代码片段。它将从JSON数组中删除相关的listdata项目，然后按预期重新渲染。我只是不明白它在做什么。它是特定的React语法吗？是我遗忘的基本内容吗？
我知道state.listdata.splice（id，1）;行获取当前的JSON对象，但是arrow函数的作用是什么？返回什么？我对此感到困惑。
任何帮助深表感谢。
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可以是：object，function或null。
在您的特定情况下，您使用函数，该函数返回状态变量的对象。
setState(function(state){ return {some:data} })
和arrow func（es6）一样
setState(state=> { return {some:data} })
在特定情况下，箭头功能仅用于简短说明
2）关于接头
在处理程序中，使用JS func splice（）从state的数组中删除元素；
但这是不好的做法，因为它会改变组件的状态，并且会导致错误，问题和不可预测的行为。你不应该改变你的状态！
为避免这种情况，您可以通过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