React

中的对象。

相反#xff0c;当你想要更新⼀个对象时#xff0c;你需要创建⼀个新的对象#xff08;或者将其拷⻉⼀…React函数组件状态-state

state

中的对象。

相反当你想要更新⼀个对象时你需要创建⼀个新的对象或者将其拷⻉⼀

份然后将

官⽹说明https://react.docschina.org/learn/updating-objects-in-state

改变对象state逻辑

(divh1{message.name}/h1h1{message.website}/h1button

onClick{changeName}更改title/button/div);

export

展开语法本质是“浅拷⻉”它只会复制⼀层。

当你想要更新⼀个嵌套属性时你必须得多次使

setMessage({

的数据结构你可能更喜欢⽤⼀种更便捷的⽅式来实现嵌套展开的效果,Immer是⼀个⾮常流⾏的库它可以让你使⽤简便但可以直接修改的语法编写代码并会帮你处理好复制的过程。

npm

})setMessage((draft){draft.name

安徽吴彦祖})}return

(divh1{message.name}/h1h1{message.website}/h1button

onClick{changeName}更改title/button/div);

export

state中的数组视为只读的。

不能直接修改原来数组相反需要生成一个新的数组。

数组添加删除元素

item.id))}}删除/buttonul{person.map((item)

(li

item.id))}}删除/button/li))}/ul/div);

export

handleChek(id,checked){setPerson((darft){const

checkItem

darft.find((i)i.idid)checkItem.check

checked})}const

deleteTab(item){setPerson(person.filter((i)i.id!item.id))}return

value{name}

item.id))setPerson(person.filter((i)!i.check))}}批量删除/buttonul{person.map((item)

(li

onChange{(e)handleChek(item.id,e.target.checked)}

/{item.name}button

onClick{()deleteTab(item)}删除/button/li))}/ul/div);

export

{clearInterval(timer);console.log(组件卸载了);};},

[]);return

onClick{add}增加/buttonh1{name}/h1button

onClick{handelDelete}卸载组件/button/div);

export