搜索表 React Hooks 后如何返回舊的 state

Question

這就是我想要做的事情：

1. 通過搜索欄搜索表格，並讓它返回過濾后的實時更改患者。
2. 如果搜索欄中有空字符串或用戶單擊取消搜索按鈕，則在搜索發生之前正常返回所有患者。

這是問題：

搜索結束后，我無法找回舊的 state。

這是我的代碼：

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

在集合 state 中，您可以訪問以前的 state，例如，對於像這樣的典型反例：

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

實際上，鼓勵使用 function 調用 setState 以在連續調用中保持當前 state 值，而不是覆蓋以前的值。 例如，如果您設置了兩次計數器，則只會發生 +1：

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

因為您將對原始 state 值執行++兩次。 也就是說，我會使用集合 state 和 function 來保留之前的 state，以便之后可以使用它，如下所示：

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

（未調試代碼）這樣，以前的 state 將處於const previousState中，以防您需要將其設置回來。

Answer 2

Instead of changing the patients state everytime you search change only the searched value state and inside render function use a function that returns the filtered patients

就像是

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