Javascript 通过Mui数据表在ReactJS中未定义Id

我试图通过MUI Datatable实现添加编辑和删除按钮，它已经被应用，但每当我按下编辑按钮时，URL就会显示未定义的。这是一张图片和我的代码。谢谢你的帮助，真的很感激

正如您看到的，上面写着/client/edit/undefined，而应该是一个id

代码：

import React，{Component}来自“React”；
从“react router dom”导入{Link}；
从“axios”导入axios；
从“mui数据表”导入MUIDataTable；
const客户端=（道具）=>(
编辑
);
导出默认类ClientsList扩展组件{
建造师（道具）{
超级（道具）；
this.deleteClient=this.deleteClient.bind（this）；
this.state={clients:[]}；
}
componentDidMount（）{
axios
.get（“http://localhost:5000/clients/")
。然后（（响应）=>{
this.setState（{clients:response.data}）；
})
.catch（（错误）=>{
console.log（错误）；
});
}
删除客户端（id）{
axios.delete（“http://localhost:5000/clients/“+id）。然后（（响应）=>{
console.log（response.data）；
});
这是我的国家({
客户端：this.state.clients.filter（（el）=>el.\u id！==id），
});
}
客户端列表（当前客户端）{
返回(
);
}
render（）{
常量列=[
{
名称：“_id”，
选项：{
显示：假，
},
},
{
姓名：“姓名”，
标签：“姓名”，
选项：{
过滤器：对，
排序：对，
},
},
{
姓名：“地址”，
标签：“地址”，
选项：{
过滤器：对，
排序：对，
},
},
{
名称：“手机”，
标签：“手机”，
选项：{
过滤器：对，
排序：对，
},
},
{
名称：“电子邮件”，
标签：“电子邮件”，
选项：{
过滤器：对，
排序：对，
},
},
{
姓名：“性别”，
标签：“性别”，
选项：{
过滤器：对，
排序：对，
},
},
{
姓名：“生日”，
标签：“生日”，
选项：{
过滤器：对，
排序：对，
},
},
{
名称：“facebookPage”，
标签：“Facebook页面”，
选项：{
过滤器：对，
排序：对，
},
},
{
名称：“facebookName”，
标签：“Facebook名称”，
选项：{
过滤器：对，
排序：对，
},
},
{
名称：“现有”，
标签：“现有”，
选项：{
过滤器：对，
排序：对，
},
},
{
名称：“备注”，
标签：“备注”，
选项：{
过滤器：对，
排序：对，
},
},
{
名称：“行动”，
选项：{
customBodyRender：（值、tableMeta、updateValue）=>{
返回{this.clientList（tableMeta.rowData）}；
},
},
},
];
const{clients}=this.state；
返回(






添加客户端数据






);
}
}

各位，表格数据被转换成数组，如果您想使用mui datatables创建编辑和删除按钮，这是我的代码

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

import React，{Component}来自“React”；
从“react router dom”导入{Link}；
从“axios”导入axios；
从“mui数据表”导入MUIDataTable；
const客户端=（道具）=>(
{console.log（“客户端道具”，道具）}
编辑
);
导出默认类ClientsList扩展组件{
建造师（道具）{
超级（道具）；
this.deleteClient=this.deleteClient.bind（this）；
this.state={clients:[]}；
}
componentDidMount（）{
axios
.get（“http://localhost:5000/clients/")
。然后（（响应）=>{
this.setState（{clients:response.data}）；
})
.catch（（错误）=>{
console.log（错误）；
});
}
删除客户端（id）{
axios.delete（“http://localhost:5000/clients/“+id）。然后（（响应）=>{
console.log（response.data）；
});
这是我的国家({
客户端：this.state.clients.filter（（el）=>el.\u id！==id），
});
}
客户端列表（当前客户端）{
返回(
);
}
render（）{
常量列=[
{
名称：“_id”，
选项：{
显示：假，
},
},
{
姓名：“姓名”，
标签：“姓名”，
选项：{
过滤器：对，
排序：对，
},
},
{
姓名：“地址”，
标签：“地址”，
选项：{
过滤器：对，
排序：对，
},
},
{
名称：“手机”，
标签：“手机”，
选项：{
过滤器：对，
排序：对，
},
},
{
名称：“电子邮件”，
标签：“电子邮件”，
选项：{
过滤器：对，
排序：对，
},
},
{
姓名：“性别”，
标签：“性别”，
选项：{
过滤器：对，
排序：对，
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>
      </>
    );
  }
}