reactjs redux中如何排序和过滤

Question

我有一个来自后端的数组中的项目列表。我在我的应用程序中使用 redux 进行状态管理。在这里，我有一个下拉列表和一个要搜索的文本字段。当用户从数组中的下拉项目中选择任何项目时，将使用相应的项目进行排序，然后从该排序的项目中，用户过滤器使用相应的搜索文本过滤数据。 这看起来像这样。 我不知道应该排序或过滤来解决这种天气。任何帮助都会很棒。

这就是我的代码的样子

const Administrator = (props) => {

  const [menuValues, setMenuValues] = React.useState("");
  const [tableData, setTableData] = useState([]);

  const [filterText, setFilterText] = useState("");





  const DataReceived = (state) =>
    state.AllUsers.Admin.site_managers.data._embedded;
  const selectedData = useSelector(DataReceived, shallowEqual);
  const selectedDataAgain = selectedData
    ? selectedData.adminUserResourceList
    : null;

  React.useEffect(() => {
    props.getUserLoadSiteManagers(props.accessToken);

    setTableData(selectedDataAgain);
  }, []);

  function handleChange(event) {
    if (event.target.value) {
      setMenuValues(event.target.value);
    } else {
      setMenuValues("all");
    }
  }


  const handleFilterText = (e) => {
    e.preventDefault();
    setFilterText(e.target.value);
  };

  const handleFilterClick = () => {
    console.log(filterText);
  };

  return (
    <Container maxWidth="lg">

          <div>
            <Select
              value={menuValues}
              onChange={handleChange}
              input={

              }

            >
              <MenuItem value="all">
                <em>All</em>
              </MenuItem>
              <MenuItem value={"name"}>Name</MenuItem>
              <MenuItem value={"designation"}>Designation</MenuItem>
              {/* <MenuItem value={"team"}>Team</MenuItem> */}
              <MenuItem value={"userType"}>User</MenuItem>
              <MenuItem value={"permission"}>Permission</MenuItem>
            </Select>
          </div>
          <div>
            <TextField

              onChange={handleFilterText}
              value={filterText}
            />
          </div>
        </div>
        <div className={classes.dense}>
          <ButtonBig onClick={handleFilterClick} title="Apply Filter" />
        </div>
      </Card>

      <Table
        data={TableData}
        isItemSelected
        numSelected={() => numSelected(numSelected)}
        onClick={SelectedId(SelectedId)}
      />


    </Container>
  );
};

Answer 1

您可以同时进行这两项操作。在你构建表格数据的地方，你可以放这样的东西：

<Table
    data={{...TableData.filter((item) => filterText ? <here you should filter the item> : true)}
    .sort(item => item[menuValues] > item[menuValues] /*here made the comparation to sort the list*/)}
    isItemSelected
    numSelected={() => numSelected(numSelected)}
    onClick={SelectedId(SelectedId)}
  />

Answer 2

我建议有一个单独的数组来显示您的内容：

const filteredItems = useMemo(() => tableData.slice(), [tableData])

注意.slice 在这里做一个浅拷贝而不是引用原始数组。

一旦用户点击排序，您只需使用您的条件调用.sort，并使用您调用的搜索文本分别调用.filter((item) => item.name.toLowerCase().includes(filterText.toLowerCase()))

最后使用这个数组来始终显示您的项目。