如何根据按钮单击更新反应数据表（反应数据表组件库）

Question

我正在使用 react-data-table-component 库从 API 获取数据并将其显示在数据表中。我有一个自定义日期过滤器选项，我可以在其中更新数据表的数据数组。我需要在更新数据时单独刷新数据表部分。

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

这里过滤的项目值我可以在按钮单击时更新，但我需要在数据表上显示更新的数据。我无法刷新页面，因为它将从 API 获取新数据。

    useEffect(() => {

    fetch( API_LINK)
    .then(res => res.json())
    .then(
      (result) => {
        setIsLoaded(true);
        console.log(result)
        setItems(result); 


      },
      // Note: it's important to handle errors here
      // instead of a catch() block so that we don't swallow
      // exceptions from actual bugs in components.
      (error) => {
        setIsLoaded(true);
        setError(error);
      },
    )
    } ,[currentLimitVal])

if (error) {
  return <div>Error: {error.message}</div>;
} else if (!isLoaded) {
  return <div>Loading...</div>;
} else {
// console.log(items)

if ( items.length > 0 )
{

        var te ='';
        var no_space ='';
        function myFunction(item) 
        {
            var letters = /^[A-Za-z]+$/

            if (item.indexOf(' ') <= 0 && item.indexOf(':') <= 0 && !/\d/.test(item))
            {
                te = te+'item.'+item+' && item.'+item+'.toString().toLowerCase().includes(filterText.toLowerCase()) || ';
                var sel ='row => row.'+item;
                // console.log(sel);
                columns.push(
                    {
                    name : item,
                selector:eval(sel),
                sortable: true 
                    }
                );
            }

 
        }

        // console.log(columns);
        Object.keys(items[0]).forEach(myFunction);
        columnsList = columns.length > 0
            && columns.map((item, i) => {
                if (  item.name.toLowerCase().includes('date') )
            return (
                <option key={i} value={item.name}>{item.name}</option>
            )
        }, this);

      
        te = te.slice(0, -3);
        filteredItems = items.filter(
            item => eval(te),
        );
     
        
  
}

以上是获取数据和添加过滤条件的代码。

  
        if (typeof(fromDate) == 'undefined' || typeof(toDate) == 'undefined'  )
        {
            message.error('Choose the Range Please ! ');
        }
        else if (typeof(colmunChoice) == 'undefined')
        {
            message.error('Choose the Date Column  Please ! ');
         }
        else
        {
        var Fdate = new Date(fromDate); 
        var Tdate = new Date(toDate); 
        console.log( colmunChoice);
        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';

        filtered = items.filter(a => {
            if(a[colmunChoice])
            {
            console.log( a[colmunChoice]);
            // var date = new Date(a[colmunChoice]);
            var date1  = a[colmunChoice].replace(/ +/g, '-')        
            var date =  moment(date1, format).format(toFormat);    
            var Fdate =  moment(fromDate, format).format(toFormat);    
            var Tdate =  moment(toDate, format).format(toFormat);    
            console.log( date);
             return (date >= Fdate && date <= Tdate);
            }
          });

          filteredItems =  filtered;
          console.log(filteredItems);
          
        //  I need to update data with filteredItems here 

        }


      } 

在此处处理日期范围搜索。我需要将搜索结果推送到数据表。

Answer 1

prop filteredItems 是已经获取的数据，所以你不需要刷新 api。

  const onRowDelete = row => () => {
    const rows = filteredItems.filter(item => item.id !== row.id)
    setFilteredItems(rows)
  }

假设你要删除一行，并且filteredItems一个状态，可以使用上面的方法刷新表。根据设计，DataTable 应该在 data 属性更改时为您刷新数据。