搜索 table React Hooks 后如何 return 到旧状态

Question

这是我正在尝试做的事情：

通过搜索栏搜索 table 并使其 return 过滤后的患者实时更改。
Return 如果搜索栏中有空字符串或用户单击取消搜索按钮，则所有患者在搜索发生前都正常。

这是问题所在：

搜索结束后，我无法恢复旧状态。

这是我的代码：

const [patients, setPatients] = useState([

    ])  

 // GET/Fetch all patients, listener for patients

useEffect(() => {
    fetch('api/patients')
    .then(response => response.json())
    .then(json => setPatients(json))

}, [])

const [searched, setSearched] = React.useState("")


  const requestSearch = (searchedVal) => {
    const filteredPatients = patients.filter((patient) => {
      return patient.fullName.toLowerCase().includes(searchedVal.toLowerCase());
    });
    setPatients(filteredPatients);
  };


  const cancelSearch = () => {
    setSearched("");
    requestSearch(searched);
  };

<SearchBar
    value={searched}
    onChange={(searchVal) => requestSearch(searchVal)}
    onCancelSearch={() => cancelSearch()}
  />
      <TableContainer component={Paper} style={{overflow: "hidden"}}>
      <Table className={classes.table} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell><strong>Name</strong></TableCell>
            <TableCell align="right"><strong>Age</strong></TableCell>
            <TableCell align="right"><strong>Condition</strong></TableCell>
            <TableCell align="right"><strong>Diagnosis</strong></TableCell>
            <TableCell align="right"><strong>Supervising Doctor</strong></TableCell>
            <TableCell align="right"><strong>Status</strong></TableCell>
            <TableCell align="center"><strong>Action</strong></TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {patients.map((patient) => (
                        <>
          {patient.status === "Active" &&         
        <Slide direction="up" in={patients} mountOnEnter unmountOnExit>
        <TableRow key={patient._id}>
              <TableCell>{patient.fullName}</TableCell>
              <TableCell align="right">{patient.age}</TableCell>
              <TableCell align="right">{patient.condition}</TableCell>
              <TableCell align="right">{patient.diagnosis}</TableCell>
              <TableCell align="right">{patient.supervisor}</TableCell>
              <TableCell align="right">{patient.status}</TableCell>
              <TableCell align="center">
                  <Tooltip title="Details">
                        <IconButton aria-label="details" component={Link} to={`/patients/${patient._id}`}>
                            <PersonPinIcon />
                         </IconButton>
                        </Tooltip> 
                        <Tooltip title="Delete">
                          <IconButton aria-label="delete" onClick={()=>deletePatient(patient._id)}>
                            <DeleteIcon />
                          </IconButton>
                         </Tooltip> 
              </TableCell>
            </TableRow>
            </Slide>
            }
            </>
          ))}
        </TableBody>
      </Table>
    </TableContainer>

Answer 1

在设置状态下，您可以访问之前的状态，例如，对于像这样的典型计数器示例：

setPatients((prevCounter) => { prevCounter++ });

实际上鼓励使用函数调用 setState 以在后续调用中保持当前状态值而不是覆盖之前的状态值。例如，如果您设置了两次计数器，则只会发生 +1：

setPatients(prevCounter++);
setPatients(prevCounter++);

因为您将对原始状态值执行两次 ++。也就是说，我会使用带有函数的设置状态来保持之前的状态，以便之后可以使用它，如下所示：

const previousState;
setPatients((prevState) => { 
    previousState = prevState;
    return filteredPatients 
});

(未调试代码) 这样，以前的状态将在 const previousState 中，以防您需要将其设置回去。

Answer 2

不是每次搜索时都更改患者状态，而是仅更改搜索值状态，并且渲染函数内部使用 returns 过滤患者

的函数

类似

<tablebody>
this.somefilterfunction().map ....
</tablebody>

搜索 table React Hooks 后如何 return 到旧状态

How to return to old state after searching table React Hooks

reactjs

material-ui

react-hooks

react-functional-component