保证每次传入的不是同一个引用才会引起视图的更新
其实和vue一样,都是使用slice,concat,splice,Object.create,Object.assign,...
等方法来操作数组或者对象。无法更新的原因也是一样的问题。
import { Button } from "antd";
import { useState } from "react";
const UpdateQuestion = () => {
let state = {
arr: ["a", "b", ["d", "e", "f"], ["1", "2", "3"]],
obj: {
msg: "ok",
data: {
page: 10,
list: [
{ id: 1, name: "p1", time: Date() },
{ id: 2, name: "p2", time: Date() },
{ id: 3, name: "p3", time: Date() },
],
},
},
};
const [arr, setArr] = useState(state.arr);
const [obj, setObj] = useState(state.obj);
console.log(obj);
// 实现数组的增删查改
const addItem = () => {
// setArr([...arr, 'a'])
setArr([...arr, "a"]);
};
const delItem = (index) => {
console.log(index);
let list = arr.concat();
list.splice(index, 1);
setArr([...list]);
};
const editItem = (item, index) => {
let v = prompt("请编辑该条目", item);
if (v) {
let list = arr.slice();
list.splice(index, 1, v);
setArr([...list]);
}
};
// 实现对象的增删查改
const add = () => {
let list = obj.data.list.slice()
const len = list.length + 1
list.push({ id: len, name: `p${len}`, time: Date() })
setObj({...obj, ...{data: {list}}})
};
const del = (index) => {
let list = obj.data.list.slice()
list.splice(index, 1)
setObj({...obj, ...{data: {list}}})
};
const edit = (item, index) => {
let v = prompt('请编辑该条目', item.name)
if(v) {
let list = obj.data.list.slice()
list.splice(index, 1, {...item, name: v})
setObj({...obj, ...{data: {list}}})
}
};
return (
<>
{/* <Button type="primary" onClick={addItem}>加一行</Button>
<ul>
{arr.map((item, index) => {
return (
<li key={index}>
{Object.prototype.toString.call(item) === '[object Array]' ?
item.map((subItem, subKey) => {
return (<p key={subKey}>{subItem} -- {subKey}</p>)
}) :
<p> {item} -- {index} </p>
}
<Button danger onClick={() => delItem(index)}>删除</Button>
<Button type="primary" onClick={() => editItem(item, index)}>编辑</Button>
</li>)
})
}
</ul> */}
<Button type="primary" onClick={add}>加一行</Button>
<ul>
{obj.data.list.map((item, index) => {
return (
<li key={item.id}>
{item.name} -- {item.time}
<Button danger onClick={() => del(index)}>删除</Button>
<Button type="primary" onClick={() => edit(item, index)}>编辑</Button>
</li>
);
})}
</ul>
</>
);
};
export default UpdateQuestion;