如何将这些对象数据放入 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 数据，但无法在 table 中显示。当我尝试这部分代码时，这将导致 mui-datatable:

中出现“无匹配数据”

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

如何在 mui-datatable 中显示这些剂量？

更新：错误还是一样，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 数组中没有。

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

How can I put these object data to the mui-datatable?

javascript

reactjs

firebase

google-cloud-firestore

mui-datatable