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

问题描述

我正在尝试通过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",{
            name: "mobile",label: "Mobile",{
            name: "email",label: "Email",{
            name: "gender",label: "Gender",{
            name: "birthday",label: "Birthday",{
            name: "facebookPage",label: "Facebook Page",{
            name: "facebookName",label: "Facebook Name",{
            name: "existing",label: "Existing",{
            name: "remarks",label: "Remarks",{
            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>
          </>
        );
      }
    }

解决方法

每个人，Table数据都被转换成一个数组，如果您想使用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",{
        name: "mobile",label: "Mobile",{
        name: "email",label: "Email",{
        name: "gender",label: "Gender",{
        name: "birthday",label: "Birthday",{
        name: "facebookPage",label: "Facebook Page",{
        name: "facebookName",label: "Facebook Name",{
        name: "existing",label: "Existing",{
        name: "remarks",label: "Remarks",{
        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>
      </>
    );
  }
}