React开发：如何移除react-table单元格字符串中的多余大括号

有两种常用的实现方式，你可以根据自己的业务场景选择：

方案1：自定义列渲染逻辑（推荐） #

不需要修改原始数据，直接在Watersheds列的配置中增加自定义Cell渲染规则，在渲染时实时处理字段格式：
找到你代码中columns的配置部分，修改Watersheds对应的配置项：

{
  Header: 'Watersheds',
  accessor: 'watersheds',
  // 增加自定义渲染逻辑
  Cell: ({ value }) => {
    // 一次正则匹配去掉所有大括号，比两次replace效率更高
    return value.replace(/[{}]/g, '')
  }
}

这种方法侵入性最低，不会修改原始API返回的数据，也不影响其他地方对该字段的使用。

方案2：预处理表格数据 #

在拿到API返回的数据之后、传给表格组件之前，先批量处理所有数据的watersheds字段：
你可以修改data的生成逻辑，比如如果是接口请求回来的数据，在then回调里先处理，你当前的示例代码可以改成：

const rawData = [{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}"}]

const data = useMemo(() => 
  rawData.map(item => ({
    ...item,
    watersheds: item.watersheds.replace(/[{}]/g, '')
  }))
, [])

这种方法适合需要多处使用处理后字段的场景。

另外注意你当前代码里POC ID列的accessor写的是age，和你数据里的poc_id字段不匹配，需要改成accessor: 'poc_id'才能正常渲染POC ID的内容。

内容的提问来源于stack exchange，提问作者gwydion93