通过 Mui 数据表在 React 中重复编辑和删除按钮

Question

大家好，我正在尝试使用 Mui 数据表在 ReactJS 中实现添加编辑和删除按钮，但问题是它不断重复，因为地图对不起我只是 ReactJS 的新手，这是我的图像和我的代码：

这是我的图像的一个例子：

这是我的代码：

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

// This is the map I was talking about:


 clientList() {
    return this.state.clients.map((currentclient) => {
      return (
        <Client
          client={currentclient}
          deleteClient={this.deleteClient}
          key={currentclient._id}
        />
      );
    });
  }

  render() {
    const columns = [
      {
        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: () => {
            return <>{this.clientList()}</>;
          },
        },
      },
    ];
    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

您不能在 clientList() 函数中使用 map ，因为您要返回 (edit, delete ) 表中每一行的所有客户端。 您还可以传递行数据，就像我将在每个按钮的链接中显示的那样，并将 _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),
    });
  }

  // This is the map I was talking about:


  clientList(currentclient) {
    // current cleint her is an array that contain all the columns values for the row specify 
    // assuming that _id will be the first column
      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 2

您可以从状态解构客户端数据，然后将其传递给 MUIDataTable

const { clients } = this.state;
const rows = clients.map((client) => { 
 return {
// assuming atributes
  name: client.name,
  address: client.address,
  mobile: client.mobile,
  email: client.email,
  gender: client.gender,
  birthday: client.birthday,
 action: <Link to=`client/edit/${client.id}` calssName='btn btn-primary'> Edit </Link> &nbsp; <a href='client' onClick={() => this.deleteClient(client.id)}> delete </a>
}
}

然后将其传递到 MUIDataTable 中的数据道具中

<MUIDataTable data={rows} columns={columns} />

Answer 3

这是一个工作片段的示例，调整它以匹配您的需要

const rows = orders.map((order) => {
    return {
      ref: <Link to={"/orders/" + order.ref}>{order.ref.slice(0, 8)}</Link>,
      amount: order.amount,
      donated: order.ticketsDetails[0].ticketDonate != "" ? "Yes" : "No",
      date: order.createdAt.slice(0, 16),
    };
  });
  const columns = [
    {
      label: "Ref",
      name: "ref",
      options: {
        filter: true,
        sort: true,
      },
    },
    {
      label: "Amount",
      name: "amount",
      options: {
        filter: true,
        sort: true,
      },
    },
    {
      label: "Date",
      name: "date",
      options: {
        filter: true,
        sort: true,
      },
    },
    {
      label: "Donated",
      name: "donated",
      options: {
        filter: true,
        sort: true,
      },
    },
  ];

  return (
    <div className="orders-container">
      <MUIDataTable columns={columns} data={rows} />
    </div>
  );