反应无限地调用api

如何解决反应无限地调用api

我的主要代码如下：

const [Meta,setMeta] = useState({
    currentPage: 1,perPage: 20,searchQuery: "",sort: { order: "created_at",dir: "desc" },total: 0,totalPage: 0,query: "",});

const customers = useSelector((state) => state.customers.customers);
const tableMeta = useSelector((state) => state.customers.tableMeta);

const data = React.useMemo(() => customers,[customers]);

useEffect(() => {
    dispatch(resetState());
    fetchData();
},[dispatch]);

useEffect(() => {
    console.log("setMeta called");
    setMeta({
        ...Meta,currentPage: tableMeta.current_page,perPage: tableMeta.per_page,total: tableMeta.total,totalPage: tableMeta.last_page,});
},[tableMeta]);

useEffect(() => {
    fetchData();
},[Meta]);

function fetchData() {
    dispatch(
        listCustomer(Meta.currentPage,Meta.perPage,Meta.sort,Meta.query)
    );
}

这里，Meta只是表元数据的本地状态引用，customers和tableMeta是redux上的两个状态，customers是表的数据列表，tableMeta是Meta的details像 pageSize,perPage,totalCount ...

这样的表的数据

在这里，在第一个 apiCall 上，我更新了 Meta 状态，我还有另一个 useEffect 钩子来监视 Meta 状态的变化，这就是导致它循环的原因永远，

在 redux stae tableMeta 更新后，我更新了 Meta 状态，一旦元更新了它的调用 api，在 api 结果 Meta 状态更新后，它就这样进入循环。

所以，直接向前，它看起来像以下导致循环的代码：

useEffect(() => {
    fetchData();
},[Meta]);

目前，我正在使用这个 useEffect，因为每当我尝试导航到不同的页面时，我都会在 Meta 状态下更新 currentPage

const handlePageChange = (page) => {
    setMeta({
        ...Meta,currentPage: page,});
};

所以我需要在元更改后调用 api。我在哪里做错了？我该如何处理这种情况？

更新

我已经将代码更新为依赖于单一的事实来源，但即使在这种方法上再次循环继续进行，因为仍然在第一次获取 tableMeta 时得到更新，我必须查看 tableMeta 的情况，例如当 handlePageChange 更新 pageNumber

const isLoading = useSelector((state) => state.customers.isLoading);
const customers = useSelector((state) => state.customers.customers);
const tableMeta = useSelector((state) => state.customers.tableMeta);

const data = React.useMemo(() => customers,[]);

useEffect(() => {
    fetchData();
},[tableMeta]);

function fetchData() {
    dispatch(
        listCustomer(
            tableMeta.currentPage,tableMeta.perPage,tableMeta.sort,tableMeta.search
        )
    );
}

const handlePageChange = (page) => {
    console.log("dispatch action to update tableMeta.page");
};
const handlePageLengthChange = (per_page) => {
    console.log("dispatch action to update tableMeta.per_page");
};
const handleSearchQuery = (search) => {
    console.log("dispatch action to update tableMeta.search");
};

切片/减速器

CUSTOMER_LIST_SUCCESS: (state,action) => {
    state.customers = action.payload.list;
    let Meta = action.payload.Meta;

    state.tableMeta = {
        current_page: Meta.current_page
            ? Meta.current_page
            : initialState.tableMeta.current_page,per_page: Meta.per_page
            ? Meta.per_page
            : initialState.tableMeta.per_page,sort: Meta.sort ? Meta.sort : initialState.tableMeta.sort,total: Meta.total ? Meta.total : initialState.tableMeta.total,totalPage: Meta.last_page
            ? Meta.last_page
            : initialState.tableMeta.totalPage,search: Meta.search
            ? Meta.search
            : initialState.tableMeta.search,};

    state.isLoading = false;
},