状态不会根据搜索输入更新 clear/backstage

Question

在 Material-UI docs 之后，我在 Datagrid table 上实现了一个搜索过滤器，但在那里遇到了一个问题。
搜索过滤器功能运行良好，但在清除输入值时，table 数据不会更新。
如果输入值发生变化，我尝试更新 personData 状态，但没有帮助。这是代码和 sandbox link

import ClearIcon from "@mui/icons-material/Clear";
import SearchIcon from "@mui/icons-material/Search";
import Box from "@mui/material/Box";
import IconButton from "@mui/material/IconButton";
import data from "./data.json";
import TextField from "@mui/material/TextField";
import { DataGrid } from "@mui/x-data-grid";
import React, { useState } from "react";

const columns = [
  { field: "name", headerName: "Name", flex: 1 },
  { field: "status", headerName: "Status", flex: 1 }
];

function escapeRegExp(value) {
  return value.replace(/[-[\]{}()*+?.,\^$|#\s]/g, "\$&");
}

function QuickSearchToolbar(props) {
  return (
    <div>
      <TextField
        variant="standard"
        value={props.value}
        onChange={props.onChange}
        placeholder="Search…"
        InputProps={{
          startAdornment: <SearchIcon fontSize="small" />,
          endAdornment: (
            <IconButton
              title="Clear"
              aria-label="Clear"
              size="small"
              style={{ visibility: props.value ? "visible" : "hidden" }}
              onClick={props.clearSearch}
            >
              <ClearIcon fontSize="small" />
            </IconButton>
          )
        }}
      />
    </div>
  );
}

const WindParkTable = () => {
  const [searchText, setSearchText] = useState("");
  const [personData, setPersonData] = useState(data || []);

  const requestSearch = React.useCallback(
    (searchValue) => {
      setSearchText(searchValue);
      const searchRegex = new RegExp(escapeRegExp(searchValue), "i");

      const filteredRows = personData.filter((row) => {
        return Object.keys(row).some((field) => {
          return searchRegex.test(row[field].toString());
        });
      });
      setPersonData(filteredRows);
    },
    [setPersonData, personData]
  );

  return (
    <Box sx={{ height: 500, width: "100%", mt: "150px" }}>
      {columns && (
        <DataGrid
          components={{ Toolbar: QuickSearchToolbar }}
          rows={personData}
          columns={columns}
          componentsProps={{
            toolbar: {
              value: searchText,
              onChange: (event) => requestSearch(event.target.value),
              clearSearch: () => requestSearch("")
            }
          }}
        />
      )}
    </Box>
  );
};

export default WindParkTable;

Answer 1

当您调用 setPersonData(filteredRows) 时，您将丢失原来的 personData。您必须在 WindParkTable 中过滤 data 而不是 personData，像这样：

const filteredRows = data.filter((row) => {
    return Object.keys(row).some((field) => {
        return searchRegex.test(row[field].toString());
    });
});

状态不会根据搜索输入更新 clear/backstage

State doesn't update on search input clear/backstage

reactjs

material-ui

datagrid