国外设计网站d开头的上海模板建站软件

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 (<div><Input value={pageParams.name} onChange={handleName}   /><Input value={pageParams.id} onChange={handleId} /><Button onClick={handleResetSearch}>重置</Button><Button type="primary" onClick={handleSearch}>查询</Button></div>)}

重置按钮也需要我们不仅把input的值置为空，并且在置空完成后，需要对接口重新进行调用。

错误代码：

	const handleResetSearch = () =>{setSearchValue((prevData) => ({...prevData,name: '',id: '',}));list();	}

如果我们在这里直接调用list接口，是无法进行同步的接口数据调用的，因为setSearchValue函数是一个异步函数，会导致我们调用接口的时候还是老的值，没有进行重置值。因此还是通过监听input的值的变化来进行接口调用，但是同时我们又不想在input值变化时候立即调用，因为我们可以添加一个中间状态，通过一个中间状态来进行处理。

正确代码：

	//设置一个状态，在点击重置按钮，设置为true，useEffect监听到值变化，我们再设置为false，从而形成一个完美闭环const [resetStatus, setResetStatus] = useState(false);const handleResetSearch = () =>{setSearchValue((prevData) => ({...prevData,name: '',id: '',}));setResetStatus(true);}useEffect(() => {if (resetStatus) {getList();setResetStatus(false);}}, [resetStatus])

这样处理，就可以解决上述问题产生的矛盾，只需要在重置完成后，准确的同步调用列表接口了。