react数组和对象数据更新同时更新视图示例

保证每次传入的不是同一个引用才会引起视图的更新
其实和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;