点击按钮时如何更新react-data-table-component库的数据表内容

问题根本原因 #

你当前的filteredItems是普通JS变量，修改它不会触发React组件重渲染，所以数据表接收不到更新后的数据源，自然不会刷新展示内容。只要把过滤后的数据存入React状态，修改时调用状态更新方法，就能触发数据表局部重渲染，不需要刷新整个页面，也不会重新请求API。

具体修改步骤 #

1. 声明状态变量存储过滤数据和列配置 #

把原来的普通变量filteredItems、columns改成React状态，避免重复生成列配置，同时状态变更可触发重渲染：

import { useState } from 'react'

// 组件内部开头声明
const [filteredItems, setFilteredItems] = useState([])
const [columns, setColumns] = useState([])

2. 拉取API数据后初始化状态 #

把原来写在渲染逻辑里的列生成、初始过滤逻辑移到拉取数据的回调里，避免每次渲染重复执行：

useEffect(() => {
  fetch(API_LINK)
    .then(res => res.json())
    .then(
      (result) => {
        setIsLoaded(true);
        setItems(result); 
        // 拉取到数据后生成列配置，替换原有的eval写法，更安全高效
        if (result.length > 0) {
          const newColumns = []
          const letters = /^[A-Za-z]+$/
          Object.keys(result[0]).forEach(item => {
            if (item.indexOf(' ') <= 0 && item.indexOf(':') <= 0 && !/\d/.test(item)) {
              newColumns.push({
                name: item,
                selector: row => row[item],
                sortable: true
              })
            }
          })
          setColumns(newColumns)
          // 初始化默认展示全量数据
          setFilteredItems(result)
        }
      },
      (error) => {
        setIsLoaded(true);
        setError(error);
      },
    )
}, [currentLimitVal])

3. 关键词筛选逻辑调整 #

如果有关键词全局筛选，用useEffect监听筛选词变化，更新过滤后的数据状态：

useEffect(() => {
  if (!items.length || !filterText?.trim()) {
    setFilteredItems(items)
    return
  }
  const lowerFilter = filterText.toLowerCase()
  const filterRes = items.filter(item => {
    // 替换原有的eval拼接字符串逻辑
    return columns.some(col => {
      const val = item[col.name]
      return val && val.toString().toLowerCase().includes(lowerFilter)
    })
  })
  setFilteredItems(filterRes)
}, [filterText, items, columns])

4. 日期筛选逻辑调整 #

在日期范围筛选的点击逻辑最后，调用setFilteredItems更新状态即可自动刷新数据表：

// 你原有的校验逻辑保持不变
else {
  const format = ['DD MM YYYY', 'MM DD YYYY', 'YYYY MM DD', 'YYYY DD MM', 'MMM DD YYYY',
  'DD MMM YYYY', 'YYYY MMM DD', 'YYYY DD MMM','MM DD YY']
  const toFormat = 'YYYY MM DD';
  const Fdate =  moment(fromDate, format).format(toFormat);    
  const Tdate =  moment(toDate, format).format(toFormat);  

  const filtered = items.filter(a => {
    if(!a[colmunChoice]) return false
    const date1  = a[colmunChoice].replace(/ +/g, '-')        
    const date =  moment(date1, format).format(toFormat);    
    return (date >= Fdate && date <= Tdate);
  });
  // 替换原来的直接赋值，调用状态更新方法触发重渲染
  setFilteredItems(filtered)
}

5. DataTable组件参数调整 #

去掉无用的key属性，直接传入状态里的列和过滤数据即可：

<DataTable 
  columns={columns} 
  data={filteredItems} 
  title='SandBox ' 
  subHeader
  subHeaderComponent={subHeaderComponentMemo} 
  pagination
  paginationResetDefaultPage={resetPaginationToggle} 
  nation 
  ltr   
  fixedHeader  
  highlightOnHover 
  responsive 
  striped 
  noDataComponent="No records"
/>

内容的提问来源于stack exchange，提问作者Dinak lal V