pc网站和手机网站,泰州网站制作报价,网站策划书的要点,遂宁市网站建设react开发调用api接口一般使用useEffect来监听值的变化#xff0c;通过值的变化与否来进行接口调用。 比如我们要进行一个查询接口 const [pageParams, setPage] useState({name: ,id: ,});const [dataList, setDataList] useState([]);const getList async () {const…react开发调用api接口一般使用useEffect来监听值的变化通过值的变化与否来进行接口调用。 比如我们要进行一个查询接口 const [pageParams, setPage] useState({name: ,id: ,});const [dataList, setDataList] useState([]);const getList async () {const res await requirementList({...pageParams,});setDataList(res.data.records);};useEffect(() {getList();}, [pageParams]);//当pageParams值变化的时候就会触发list接口当然页面内可能会有很多的按钮比如有两个input框一个input框是控制查询名称一个input是查询id。这两个按钮后面有一个查询按钮当点击查询按钮的时候才会进行页面的数据处理。 因此需要绑定两个input的值但是每次进行input值的时候就会触发接口调取
const app (){const handleName (value) {setPage((prev){return {...prev,name:value}});}const handleId (value) {setPage((prev){return {...prev,id:value}});}//查询按钮const handleSearchDemand () {getList();}//因为我们每次更改input的值都会导致pageParams的值发生变化这就会导致接口调用但是我们需要再查询的时候才调用因此需要更改useEffect的监听条件改为首次进入页面触发[pageParams] 更改为[]useEffect(() {getList();}, []);return (divInput value{pageParams.name} onChange{handleName} /Input value{pageParams.id} onChange{handleId} /Button onClick{handleResetSearch}重置/ButtonButton typeprimary onClick{handleSearch}查询/Button/div)}重置按钮也需要我们不仅把input的值置为空并且在置空完成后需要对接口重新进行调用。
错误代码 const handleResetSearch () {setSearchValue((prevData) ({...prevData,name: ,id: ,}));list(); }如果我们在这里直接调用list接口是无法进行同步的接口数据调用的因为setSearchValue函数是一个异步函数会导致我们调用接口的时候还是老的值没有进行重置值。因此还是通过监听input的值的变化来进行接口调用但是同时我们又不想在input值变化时候立即调用因为我们可以添加一个中间状态通过一个中间状态来进行处理。
正确代码 //设置一个状态在点击重置按钮设置为trueuseEffect监听到值变化我们再设置为false从而形成一个完美闭环const [resetStatus, setResetStatus] useState(false);const handleResetSearch () {setSearchValue((prevData) ({...prevData,name: ,id: ,}));setResetStatus(true);}useEffect(() {if (resetStatus) {getList();setResetStatus(false);}}, [resetStatus])
这样处理就可以解决上述问题产生的矛盾只需要在重置完成后准确的同步调用列表接口了。
