通过 Mui Datatable 在 ReactJS 中未定义的 Id

Question

我正在尝试通过 MUI 数据表添加编辑和删除按钮，它已经应用，但是每当我按下编辑按钮时，URL 都会显示未定义。这是一张图片和我的代码。感谢您的帮助，非常感谢。

如您所见，它说 /client/edit/undefined 而应该是 id

代码：

 import React, { Component } from "react";
    import { Link } from "react-router-dom";
    import axios from "axios";
    import MUIDataTable from "mui-datatables";
    
    const Client = (props) => (
      <>
        <Link to={"client/edit/" + props.client._id} className="btn btn-primary">
          Edit
        </Link>
        &nbsp;
        <a
          href="client"
          onClick={() => {
            props.deleteClient(props.client._id);
          }}
          className="btn btn-danger"
        >
          Delete
        </a>
      </>
    );
    
    export default class ClientsList extends Component {
      constructor(props) {
        super(props);
    
        this.deleteClient = this.deleteClient.bind(this);
    
        this.state = { clients: [] };
      }
    
      componentDidMount() {
        axios
          .get("http://localhost:5000/clients/")
          .then((response) => {
            this.setState({ clients: response.data });
          })
          .catch((error) => {
            console.log(error);
          });
      }
    
      deleteClient(id) {
        axios.delete("http://localhost:5000/clients/" + id).then((response) => {
          console.log(response.data);
        });
    
        this.setState({
          clients: this.state.clients.filter((el) => el._id !== id),
        });
      }
    
      clientList(currentclient) {
        return (
          <Client
            client={currentclient}
            deleteClient={this.deleteClient}
            key={currentclient[0]}
          />
        );
      }
    
      render() {
        const columns = [
          {
            name: "_id",
            options: {
              display: false,
            },
          },
          {
            name: "name",
            label: "Name",
            options: {
              filter: true,
              sort: true,
            },
          },
          {
            name: "address",
            label: "Address",
            options: {
              filter: true,
              sort: true,
            },
          },
          {
            name: "mobile",
            label: "Mobile",
            options: {
              filter: true,
              sort: true,
            },
          },
          {
            name: "email",
            label: "Email",
            options: {
              filter: true,
              sort: true,
            },
          },
          {
            name: "gender",
            label: "Gender",
            options: {
              filter: true,
              sort: true,
            },
          },
          {
            name: "birthday",
            label: "Birthday",
            options: {
              filter: true,
              sort: true,
            },
          },
          {
            name: "facebookPage",
            label: "Facebook Page",
            options: {
              filter: true,
              sort: true,
            },
          },
          {
            name: "facebookName",
            label: "Facebook Name",
            options: {
              filter: true,
              sort: true,
            },
          },
          {
            name: "existing",
            label: "Existing",
            options: {
              filter: true,
              sort: true,
            },
          },
          {
            name: "remarks",
            label: "Remarks",
            options: {
              filter: true,
              sort: true,
            },
          },
          {
            name: "Action",
            options: {
              customBodyRender: (value, tableMeta, updateValue) => {
                return <>{this.clientList(tableMeta.rowData)}</>;
              },
            },
          },
        ];
        const { clients } = this.state;
    
        return (
          <>
            <br />
            <br />
            <br />
            <div style={{ margin: "10px 15px", overflowX: "auto" }}>
              <Link to={"client/create/"} className="btn btn-primary pull-right">
                Add Client Data
              </Link>
              <br />
              <br />
              <br />
              <MUIDataTable data={clients} columns={columns} />
            </div>
          </>
        );
      }
    }

Answer 1

大家，表格数据被转置为数组，如果你想使用 mui 数据表有一个编辑和删除按钮，这是我的代码。

import React, { Component } from "react";
import { Link } from "react-router-dom";
import axios from "axios";
import MUIDataTable from "mui-datatables";

const Client = (props) => (
  <>
    {console.log("Client Props", props)}
    <Link to={"client/edit/" + props.client[0]} className="btn btn-primary">
      Edit
    </Link>
    &nbsp;
    <a
      href="client"
      onClick={() => {
        props.deleteClient(props.client[0]);
      }}
      className="btn btn-danger"
    >
      Delete
    </a>
  </>
);

export default class ClientsList extends Component {
  constructor(props) {
    super(props);

    this.deleteClient = this.deleteClient.bind(this);

    this.state = { clients: [] };
  }

  componentDidMount() {
    axios
      .get("http://localhost:5000/clients/")
      .then((response) => {
        this.setState({ clients: response.data });
      })
      .catch((error) => {
        console.log(error);
      });
  }

  deleteClient(id) {
    axios.delete("http://localhost:5000/clients/" + id).then((response) => {
      console.log(response.data);
    });

    this.setState({
      clients: this.state.clients.filter((el) => el._id !== id),
    });
  }

  clientList(currentclient) {
    return (
      <Client
        client={currentclient}
        deleteClient={this.deleteClient}
        key={currentclient[0]}
      />
    );
  }

  render() {
    const columns = [
      {
        name: "_id",
        options: {
          display: false,
        },
      },
      {
        name: "name",
        label: "Name",
        options: {
          filter: true,
          sort: true,
        },
      },
      {
        name: "address",
        label: "Address",
        options: {
          filter: true,
          sort: true,
        },
      },
      {
        name: "mobile",
        label: "Mobile",
        options: {
          filter: true,
          sort: true,
        },
      },
      {
        name: "email",
        label: "Email",
        options: {
          filter: true,
          sort: true,
        },
      },
      {
        name: "gender",
        label: "Gender",
        options: {
          filter: true,
          sort: true,
        },
      },
      {
        name: "birthday",
        label: "Birthday",
        options: {
          filter: true,
          sort: true,
        },
      },
      {
        name: "facebookPage",
        label: "Facebook Page",
        options: {
          filter: true,
          sort: true,
        },
      },
      {
        name: "facebookName",
        label: "Facebook Name",
        options: {
          filter: true,
          sort: true,
        },
      },
      {
        name: "existing",
        label: "Existing",
        options: {
          filter: true,
          sort: true,
        },
      },
      {
        name: "remarks",
        label: "Remarks",
        options: {
          filter: true,
          sort: true,
        },
      },
      {
        name: "Action",
        options: {
          customBodyRender: (value, tableMeta, updateValue) => {
            return <>{this.clientList(tableMeta.rowData)}</>;
          },
        },
      },
    ];
    const { clients } = this.state;

    return (
      <>
        <br />
        <br />
        <br />
        <div style={{ margin: "10px 15px", overflowX: "auto" }}>
          <Link to={"client/create/"} className="btn btn-primary pull-right">
            Add Client Data
          </Link>
          <br />
          <br />
          <br />
          <MUIDataTable data={clients} columns={columns} />
        </div>
      </>
    );
  }
}