如何在React中迭代嵌套的对象(在屏幕上渲染任何数据并以不可变的方式设置状态)

Question

const [person, setPerson] = useState({
  "users-1": {
    id: "01",
    email: "user1@dame.com",
    name: "alexa",
    userName: "alexa01",
    role: "",
    mobileNumber: "+1363545454",
    password: "fdtgs",
    registrationDate: "",
    address: {
      division: "Dhaka",
      city: "Savar",
      road: 20,
    },
    institute: "",
  },
  "users-2": {
    id: "02",
    email: "user-02@dame.com",
    name: "OkayGoogle",
    userName: "OkayGoogle02",
    role: "",
    mobileNumber: "+4564545454",
    password: "",
    registrationDate: "",
    address: {
      division: "Rangpur",
      city: "Nilphamari",
      road: 21,
    },
    institute: "",
  },
});

问:1-如何像数组一样迭代此对象并在屏幕上显示一些信息?2 --如何操作复制的数据并将状态设置为-2 --执行此操作的最有效方法是什么？

注:我也使用了这个"Object.keys(data).map(key => data[key])"，它不会创建一个新的对象。提亚

Answer 1

我已经创建了一个沙箱，显示姓名和电子邮件的用户在个人状态和按钮，添加新的用户到它。我想它会回答你的no1 & no2。

https://codesandbox.io/s/keen-voice-9lmuc?file=/src/App.js