从 table 单元格中的字符串中删除不需要的字符

Question

我有一个 React table (react-table)，它从 api 中获取数据来填充行单元格。数据看起来像这样：

const data = [{id: "6666", contact_id: "1", poc_id: "2", contact: "John Doe", 
               watersheds: "{12070104,12090301,12090401}"}, {id: "6667", contact_id: "2", 
               poc_id: "3", contact: "Sally Jones", watersheds: "{12070105,12090301}"}]

可能会有更多或更少的项目，具体取决于 API 请求 return 的内容。我的问题是，当 Watershed 列填充了 watershed 数据项时，它包括 { ... }s。我希望它在单元格中 return 12070104,12090301,12090401，而不是 {12070104,12090301,12090401}。我知道我可以使用 replace 或其他一些方法来删除和替换不需要的 { }s:

data.map(item => (item.watersheds.replace(/{/gi, "").replace(/}/gi, "")))

或类似的东西，但由于我将数据动态添加到 table，我不确定如何在 { }s 显示在 table 之前删除它们？我的 table 看起来像这样：

import React from 'react'
import styled from 'styled-components'
import { useTable } from 'react-table'
import makeData from './makeData'

const Styles = styled.div`
  padding: 1rem;

  table {
    border-spacing: 0;
    border: 1px solid black;

    tr {
      :last-child {
        td {
          border-bottom: 0;
        }
      }
    }

    th,
    td {
      margin: 0;
      padding: 0.5rem;
      border-bottom: 1px solid black;
      border-right: 1px solid black;

      :last-child {
        border-right: 0;
      }
    }
  }
`

function Table({ columns, data }) {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = useTable({
    columns,
    data,
  })

  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map(headerGroup => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th {...column.getHeaderProps()}>{column.render('Header')}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row, i) => {
          prepareRow(row)
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map(cell => {
                return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
              })}
            </tr>
          )
        })}
      </tbody>
    </table>
  )
}

function App() {
  const columns = React.useMemo(
    () => [
      {
        Header: 'ID',
        accessor: 'id',
      },
      {
        Header: 'CONTACT ID',
        accessor: 'contact_id',
      },
      {
        Header: 'POC ID',
        accessor: 'age',
      },
      {
        Header: 'NAME',
        accessor: 'contact',
      },
      {
        Header: 'Watersheds',
        accessor: 'watersheds',
      }
    ], []
  )

  //const data = React.useMemo(() => makeData(20), [])
  const data = useMemo(() =>    [{id: "6666", contact_id: "1", poc_id: "2", contact: "John Doe", 
    watersheds: "{12070104,12090301,12090401}"}, {id: "6667", contact_id: "2", 
    poc_id: "3", contact: "Sally Jones", watersheds: "{12070105,12090301}"}])  

  return (
    <Styles>
      <Table columns={columns} data={data} />
    </Styles>
  )
}

export default App

Answer 1

在您的 App 组件中，就在使用 useMemo 之前，您可以将该对象数组提取到一个单独的变量中，迭代 watersheds 并将它们替换为您使用的正则表达式上面用过。之后你可以将它传递给 useMemo.

Answer 2

您可以为每个单元格呈现自定义内容。而不是在传递给 table 之前转换数据。我们可以在渲染之前转换值。

 {
        Header: "Watersheds",
        accessor: "watersheds",
        Cell: (props) => {
          return <p>{props.value.replace(/{/gi, "").replace(/}/gi, "")}</p>;
        }
      }

Working Sandbox

从 table 单元格中的字符串中删除不需要的字符

Remove unwanted characters from a string in table cell

reactjs

replace

cell

react-table