如何将这些对象数据放入 mui-datatable？

Question

我有这些来自 firestore 的 doses 对象。

我已经可以显示除对象doses之外的所有数据

class Users extends Component {
  constructor() {
    super();
    this.state = { users: [] };
  }

  columns = [
    "Name",
    "Address",
    "Vaccine",
  ];


  componentDidMount() {
    firestore
      .collection("users")
      .get()
      .then((snapshot) => {
        const users = [];
        snapshot.forEach((doc) => {
          const data = doc.data();
          console.log("doses", data.doses);
             doc.data().doses.forEach((index) => {
        console.log(index.selectedVaccine);
      });
      
          users.push({
            ...((data.firstName && data.lastName) || data.middleName == " "
              ? {
                  Name:
                    data.firstName +
                    " " +
                    data.middleName +
                    "." +
                    data.lastName,
                }
              : {}),
            Email: data.email,
            Address: data.address,
          });
        });
        this.setState({ users: users });
        // console.log(snapshot)
      })
      .catch((error) => console.log(error));
  }

  render() {
    return this.state.users ? (
      <MUIDataTable
        title={"List of Users"}
        columns={this.columns}
        data={this.state.users}
        options={this.options}
      />
    ) : (
      <div>Loading...</div>
    );
  }
}

export default Users;

当我console.log("doses", data.doses); 时，我可以查看所有用户的doses 数据，但无法在表格中显示。当我尝试这部分代码时，这将导致 mui-datatable 内“没有匹配的数据”：

   doc.data().doses.forEach((index) => {
            console.log(index.selectedVaccine);
          });
          

如何在 mui 数据表中显示这些剂量？

更新：错误仍然相同，它在 mui-datatable 中显示“抱歉，未找到匹配记录”。

columns = ["Name", "Email", "Phone Number", "Address", "Vaccine"];

componentDidMount() {
    firestore
      .collection("users")
      .get()
      .then((snapshot) => {
        const users = [];
        snapshot.forEach((doc) => {
          const data = doc.data();
          console.log("doses", data.doses);
          users.push({
            ...((data.firstName && data.lastName) || data.middleName == " "
              ? {
                  Name:
                    data.firstName +
                    " " +
                    data.middleName +
                    "." +
                    data.lastName,
                }
              : {}),

            Email: data.email,
            "Phone Number": data.phoneNumber,
            Address: data.address,
            Vaccine: data.doses.selectedVaccine,
          });
        });
        this.setState({ users: users });
      })
      .catch((error) => console.log(error));
  }

这是错误：

Answer 1

您可以将列添加到剂量的columns 数组中，也可以将剂量的数据添加到users 数组中。

查看以下代码示例：

columns = [
    "Name",
    "Address",
    "Dose 1",
    "Dose 2",
    "First Dose",
    "First Vaccinator",
    "Dose ID"
];

users.push({
    ...((data.firstName && data.lastName) || data.middleName == " " ? {
        Name: data.firstName +
            " " +
            data.middleName +
            "." +
            data.lastName,
    } : {}),
    "Address": data.address,
    "Dose 1": data.doses.dose1,
    "Dose 2": data.doses.dose2,
    "First Dose": data.doses.firstDose,
    "First Vaccinator": data.doses.firstVaccinator,
    "Dose ID": data.doses.id
});

此外，您似乎收到“无匹配数据”错误，因为您的 columns 数组中有“疫苗”，但您的 users 数组中没有它，而您有“电子邮件”在您的 users 数组中，但您的 columns 数组中没有它。