对表应用多个过滤器reactjs

Question

这里我有三个过滤器，我需要选择三个过滤器来过滤表中的数据。我正在使用 if else 语句来检查和过滤数据，因此我想以某种模块化方式修改代码以实现相同的目的，任何人都可以建议我，我应该使用 switch case 吗？

  if (mapFilter === 'Mapped') {
    if (listFilter) {
      const result = fullData.filter(
        data =>
          data.partner_mapping_classification.length > 0 &&
          data.account === listFilter,
      );
      setFinalData(result);
    } else {
      const result = fullData.filter(
        data => data.partner_mapping_classification.length > 0,
      );
      setFinalData(result);
    }
  } else if (mapFilter === 'Not Mapped') {
    if (listFilter) {
      const result = fullData.filter(
        data =>
          data.partner_mapping_classification === '' &&
          data.account === listFilter,
      );
      setFinalData(result);
    } else {
      const result = fullData.filter(
        data => data.partner_mapping_classification === '',
      );
      setFinalData(result);
    }
  } else if (mapFilter === 'All') {
    if (listFilter) {
      const result = fullData.filter(
        data => data.account === listFilter,
      );
      setFinalData(result);
    } else {
      const result = fullData.filter(
        data => data.partner_mapping_classification.length > 0,
      );
      setFinalData(result);
    }
  } else if (mapFilter === '' && listFilter !== '') {
    const result = fullData.filter(
      data => data.account === listFilter,
    );
    setFinalData(result);
  } else if (mapFilter === '' && listFilter === '') {
    setFinalData([]);
  } else {
    setFinalData([]);
  }
};

Answer 1

易于扩展的方法（随后是现场演示）

使用switch语句或多个链式if(语句（甚至同一if(语句中的多个条件）似乎不是一个好主意，因为扩展和维护此类代码将变得太困难。

与上述硬编码技术相反，我建议在表组件的状态中有一个对象，它将对象属性（您希望过滤表条目）绑定到关键字（附加到您的输入）。

假设（根据您的屏幕截图）您使用 MaterialUI 来设计组件的样式，以下示例将演示上述方法：

const { useState } = React,
      { render } = ReactDOM,
      { Container, TextField, TableContainer, Table, TableHead, TableBody, TableRow, TableCell } = MaterialUI,
      rootNode = document.getElementById('root')
      
const sampleData = [
        {id: 0, name: 'apple', category: 'fruit', color: 'green'},
        {id: 1, name: 'pear', category: 'fruit', color: 'green'},
        {id: 2, name: 'banana', category: 'fruit', color: 'yellow'},
        {id: 3, name: 'carrot', category: 'vegie', color: 'red'},
        {id: 4, name: 'strawberry', category: 'berry', color: 'red'}
      ],
      sampleColumns = [
        {id: 0, property: 'name', columnLabel: 'Item Name'},
        {id: 1, property: 'category', columnLabel: 'Category'},
        {id: 2, property: 'color', columnLabel: 'Item Color'}
      ]
      
const MyFilter = ({filterProperties, onFilter}) => (
  <Container>
    {
      filterProperties.map(({property,id}) => (
        <TextField
          key={id}
          label={property}
          name={property}
          onKeyUp={onFilter}
        />
      ))
    }
  </Container>
)

const MyTable = ({tableData, tableColumns}) => (
  <TableContainer>
    <Table>
      <TableHead>
        <TableRow>
          {
            tableColumns.map(({id, columnLabel}) => (
              <TableCell key={id}>
                {columnLabel}
              </TableCell>
            ))
          }
        </TableRow>
      </TableHead>
      <TableBody>
        {
          tableData.map(row => (
            <TableRow key={row.id}>
              {
                tableColumns.map(({id, property}) => (
                  <TableCell key={id}>
                    {row[property]}
                  </TableCell>
                ))
              }
            </TableRow>
          ))
        }
      </TableBody>
    </Table>
  </TableContainer>
)

const App = () => {
  const [state, setState] = useState({
          data: sampleData,
          columns: sampleColumns,
          filterObj: sampleColumns.reduce((r,{property}) => (r[property]='', r), {})
        }),
        onFilterApply = ({target:{name,value}}) => {
          const newFilterObj = {...state.filterObj, [name]: value}
          setState({
            ...state,
            filterObj: newFilterObj,
            data: sampleData.filter(props => 
              Object
                .entries(newFilterObj)
                .every(([key,val]) => 
                  !val.length ||
                  props[key].toLowerCase().includes(val.toLowerCase()))
            )
          })
        }
  return (
    <Container>
      <MyFilter 
        filterProperties={state.columns}
        onFilter={onFilterApply}
      />
      <MyTable
        tableData={state.data}
        tableColumns={state.columns}
      />
    </Container>
  )
}

render (
  <App />,
  rootNode
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script><div id="root"></div>