如何将这些对象数据放在MUI-Datables？

Question

我有这些来自firestore的对象。

我已经可以显示所有数据不包括对象doses

doses

当我可以查看所有用户的数据时，但我无法在表中显示。当我尝试了代码的这一部分时，这将导致MUI-DataTable内部的“无匹配数据”：

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;

我如何在MUI-DataTable中显示这些剂量？

update：错误仍然相同，它说“对不起，在MUI-DataTable中找不到匹配记录”。

console.log("doses", data.doses);

这是错误：

您可以将列添加到剂量的

doses

数组中，您可以在

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

数组中的剂量添加数据。

检查下面的代码样本：

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));
  }

columns

Answer 1

此外，似乎您正在遇到“无匹配数据”错误，因为您的

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

阵列中没有它。