如何在react中使用搜索?

Question

我想通过假日名称搜索来自API的假日列表。用户应该能够通过在crud表列表中看到它后单击它来选择带有他/她正在查找的假日名称的行。我希望用户在整个列表中简单地通过名称查找假期，并访问其详细信息。我如何用react hook做到这一点?代码如下所示。

const AddHolidayDateForm = () => {
let history = useHistory();
const [holidays, setHolidays] = useState([])
const [searchTerm, setSearchTerm] = React.useState("");
useEffect(() => {
loadHoliday();
}, []);
const loadHoliday = async () => {     
const res = await axios.post(`..`, {   });  

setHolidays(res.data.reverse());
};
const [page, setPage] = React.useState(0);
const [rowsPerPage, setRowsPerPage] = React.useState(10);
const handleChangePage = (event, newPage) => {
setPage(newPage);
};
const handleChangeRowsPerPage = event => {
setRowsPerPage(parseInt(event.target.value, 10));
setPage(0);
};

const handleChangeSearch = event => {
setSearchTerm(event.target.value);
};
const results = !searchTerm
? holidays
: holidays.filter(
holiday => holiday && holiday.toLowerCase && holiday.toLowerCase().includes(searchTerm.toLocaleLowerCase())
);

return (
<div className="container">
<div className="py-4">
<div className="ui search">
<div className="float-left mb-3">
<input type="text"
placeholder="search"
className="mr-sm-2"
value={searchTerm}
onChange={handleChangeSearch}
/>
<FaSearch />
</div>
</div>            
<Table responsive>
<thead class="thead-dark">
<tr>
<th scope="col">#</th>

<th scope="col">Name</th>
<th scope="col">Start Time</th>
<th scope="col">End Time</th>
</tr>
</thead>
<tbody>
{results
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map((holiday, index) => {
return (
<tr>
<th scope="row">{index + 1}</th>                                         
<td>{holiday.name}</td>
<td>{holiday.startTime}</td>
<td>{holiday.endTime}</td>
</tr>                                    )
})                         
}
</tbody>
</Table>             
</div>
<div className="col-sm-6">
</div>
<div className="d-flex justify-content-center">
<TablePagination
rowsPerPageOptions={[5, 10, 25]}
component="div"
count={holidays.length}
rowsPerPage={rowsPerPage}
page={page}
onChangePage={handleChangePage}
onChangeRowsPerPage={handleChangeRowsPerPage}
/>
</div>
</div>
);
}
export default AddHolidayDateForm;

Answer 1

我首先看到的是results不是一个状态变量。在react中，如果你想渲染一个变量，你必须把它作为一个状态变量来管理。

那么，这样修改你的代码:

const AddHolidayDateForm = () => {
let history = useHistory();
const [holidays, setHolidays] = useState([])
const [searchTerm, setSearchTerm] = React.useState("");
const [res, setRes] = useState([]);  //<-- state to render
useEffect(() => {
loadHoliday();
}, []);
useEffect(() => {  //<-- every time holidays or searchTerm change, filter results
const results = !searchTerm
? holidays
: holidays.filter(
holiday => holiday && holiday.toLowerCase && holiday.toLowerCase().includes(searchTerm.toLocaleLowerCase())
);
setRes(results);
}, [holidays, searchTerm]);
const loadHoliday = async () => {     
const res = await axios.post(`..`, {   });  

setHolidays(res.data.reverse());
};
const [page, setPage] = React.useState(0);
const [rowsPerPage, setRowsPerPage] = React.useState(10);
const handleChangePage = (event, newPage) => {
setPage(newPage);
};
const handleChangeRowsPerPage = event => {
setRowsPerPage(parseInt(event.target.value, 10));
setPage(0);
};

const handleChangeSearch = event => {
setSearchTerm(event.target.value);
};

return (
<div className="container">
<div className="py-4">
<div className="ui search">
<div className="float-left mb-3">
<input type="text"
placeholder="search"
className="mr-sm-2"
value={searchTerm}
onChange={handleChangeSearch}
/>
<FaSearch />
</div>
</div>            
<Table responsive>
<thead class="thead-dark">
<tr>
<th scope="col">#</th>

<th scope="col">Name</th>
<th scope="col">Start Time</th>
<th scope="col">End Time</th>
</tr>
</thead>
<tbody>
{res   //<-- here use res state and not results
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map((holiday, index) => {
return (
<tr>
<th scope="row">{index + 1}</th>                                         
<td>{holiday.name}</td>
<td>{holiday.startTime}</td>
<td>{holiday.endTime}</td>
</tr>                                    )
})                         
}
</tbody>
</Table>             
</div>
<div className="col-sm-6">
</div>
<div className="d-flex justify-content-center">
<TablePagination
rowsPerPageOptions={[5, 10, 25]}
component="div"
count={holidays.length}
rowsPerPage={rowsPerPage}
page={page}
onChangePage={handleChangePage}
onChangeRowsPerPage={handleChangeRowsPerPage}
/>
</div>
</div>
);
}
export default AddHolidayDateForm;