从数组中映射一个项目

Question

我正在映射一个数组以具有指示我修改表的一行的链接，

这是我的式列表组件：

import React from 'react';
import { Link } from 'react-router-dom';
import Table from '../../../Common/Table';
import { textFilter } from 'react-bootstrap-table2-filter';

const DepotList = props => {
    const { depots } = props;
    const columns = [
        {
            dataField: 'name',
            text: 'nom depot',
        },
        {
            dataField: 'adress',
            text: 'adresse',
            sort: true,
        },
        {
            dataField: 'size',
            text: 'Taille depot',
        },
        {
            dataField: 'equipements',
            text: 'Equipements',
        },
        {
            dataField: 'updated',
            text: 'Mis à jour',
        },
        {
            dataField: '',
            text: 'Actions',
            formatter: () => {
                return (
                    <>
                        {depots.map((depot, index) => (
                            <div>
                                <Link
                                    className=""
                                    to={`/gestion-depots/edit/${depot._id}`}
                                    key={index}
                                >
                                    {console.log(`index ${depot._id}`)}
                                    Modifier
                                </Link>
                            </div>
                        ))}
                    </>
                );
            },
        },
    ];

    return (
        <>
            <p>{depots.length} Depots</p>

            {console.log('depotlist ----', depots)}

            <Table data={depots} columns={columns} csv search filter />
        </>
    );
};

export default DepotList;

但是，我在这样的每个动作行中都会获得n个链接：

，如果我单击链接，它可以正常工作：第一行，第二行，第二行..ETC

可以帮助我修复修复这个问题！

这是表组件

import React from 'react';
import BootstrapTable from 'react-bootstrap-table-next';
import cellEditFactory, { Type } from "react-bootstrap-table2-editor";
import filterFactory, { textFilter } from "react-bootstrap-table2-filter";
import paginationFactory from "react-bootstrap-table2-paginator";
import ToolkitProvider, {
 CSVExport,
 Search
 } from 'react-bootstrap-table2-toolkit';

const indication = () => {
  return 'Oops! No data now! Please try again!';
 };

const { ExportCSVButton } = CSVExport;
const { SearchBar } = Search;

 const Table = props => {
  const {
  data,
  columns,
  striped,
  hover,
  condensed,
  csv,
  search,
  clickAction,
  isRowEvents,
  filter,
  cellEdit,
  pagination
} = props;

const rowEvents = {
 onClick: (e, row, rowIndex) => {
  clickAction(row._id, rowIndex);
}
};
const selectRow = {
  mode: "checkbox",
  clickToSelect: true,
  clickToEdit: true,
};
 return (
   <ToolkitProvider
       keyField='_id'
       data={data}
       columns={columns}
       exportCSV={csv}
       search={search}
       filter={filter}
      cellEdit={cellEdit}
      pagination={pagination}
      >
     {props => (
    <div className='table-section'>
      {csv && (
        <div className='csv'>
          <ExportCSVButton
            className='input-btn custom-btn-secondary md'
            {...props.csvProps}
          >
            Exporter CSV
          </ExportCSVButton>
        </div>
      )}
      {search && (
        <div className='search'>
          <SearchBar {...props.searchProps} />
        </div>
      )}
      <BootstrapTable
        {...props.baseProps}
        keyField='_id'
        data={data}
        columns={columns}
        striped={striped}
        hover={hover}
        condensed={condensed}
        pagination={paginationFactory()}
        cellEdit={cellEditFactory({
          mode: "dbclick",
          blurToSave: true,
          nonEditableRows: () => [1, 2, 3],
        })}
        noDataIndication={indication}           
        rowEvents={isRowEvents ? rowEvents : null}
        filter={filterFactory()}

        
      />
    </div>
  )}
</ToolkitProvider>
 );
 };

  export default Table;

Answer 1

仓库可能是一个数组，在列的最后索引中，您将其映射为“修饰符”作为内部文本。

    formatter: () => {
        return (
            <>
                {depots.map((depot, index) => (
                    <div>
                        <Link
                            className=""
                            to={`/gestion-depots/edit/${depot._id}`}
                            key={index}
                        >
                            {console.log(`index ${depot._id}`)}
                            Modifier
                        </Link>
                    </div>
                ))}
            </>
        );
    },

您还可以共享表组件和仓库阵列列表吗？

Answer 2

您是在格式化器中映射所有depots数组，因此在每一行中，您

都不确定您在table> Table Component中实现的所有链接，但是您可能可以以这样的方式解决问题的问题，

{
            dataField: '_id',
            text: 'Actions',
            formatter: (_id) => {
                return (
                            <div>
                                <Link
                                    className=""
                                    to={`/gestion-depots/edit/${_id}`}
                                    key={index}
                                >
                                    {console.log(`index ${_id}`)}
                                    Modifier
                                </Link>
                            </div>
                 
                );
            },
        },

您必须更改所有要更改的是您根据datafield

或您可以将整个项目传递给格式化，并在单个项目上进行提取