3-6TodoList代码优化章节中handleItemDelete函数代码优化问题

来源：3-6 TodoList 代码优化

Mr陈序猿

2019-04-11

3-6TodoList代码优化章节中，
handleItemDelete(index)
{
this.setState((prevState) => {
const list = […prevState.list];
list,splice(index, 1);
return {list}
})
}
这里是如何将const list赋值给state中的list的？
是通过list名称吗？
将const list定义成const aaa代码如下，不能完成删除操作
handleItemDelete(index)
{
this.setState((prevState) => {
const aaa = […prevState.list];
aaa,splice(index, 1);
return {aaa}
})
}

写回答

3回答

上课妹红

2019-04-11

已采纳

首先关于名称，这是es6的一种简洁写法。

ES6 允许在对象之中，直接写变量。这时，属性名为变量名, 属性值为变量的值。

如

let { foo, bar } = { foo: 'aaa', bar: 'bbb' };

实际上是

let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };

同理这里的

return { list };
return { aaa };

是这样

return { list:list };
return { aaa:aaa };

这种写法的简写

可以参考这里对象的扩展

再说你遇到的问题，你的写法是const了一个aaa，这个aaa里面是从 […prevState.list]拷贝到了state里面的list属性，然后返回aaa，也就是说你这样操作，是在设置state里面的aaa属性。但是在我们的this.state属性里面其实并没有aaa这个属性，而页面是由state中的list去渲染的，“你们要删的是aaa，关我list什么事？（鲁迅脸）”，所以这并没有到达需要的删除效果。关于setState可以查看这里React.Component。

至于我说的这一堆到底对不对....还是问老师靠谱233，毕竟我也在学，说错了别打我...

自驱动

同学，你这怎么排版的，md? 求教。

2020-05-06

共2条回复