react 使用状态管理调用列表接口渲染列表（包含条件查询，统一使用查询按钮，重置功能），避免重复多次调用接口的方法

react开发调用api接口一般使用useEffect来监听值的变化，通过值的变化与否来进行接口调用。

比如我们要进行一个查询接口

javascript 复制代码

    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值的时候就会触发接口调取，

javascript 复制代码

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的值置为空，并且在置空完成后，需要对接口重新进行调用。

错误代码：

javascript 复制代码

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

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

正确代码：

javascript 复制代码

	//设置一个状态，在点击重置按钮，设置为true，useEffect监听到值变化，我们再设置为false，从而形成一个完美闭环
    const [resetStatus, setResetStatus] = useState(false);

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

    useEffect(() => {
        if (resetStatus) {
            getList();
            setResetStatus(false);
        }
    }, [resetStatus])

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