React useEffect compare old new dependency

React useEffect compare old new dependency

setState & async state bug

antd table update duplication bug

page & pageSize 变化 API 只请求一次

    useEffect(() => {
        const params = {
            word: search,
            page: page,
            per_page: pageSize,
        };
        fetchData(params);
    }, [page]);
    const onPageSizeChange = (val, size) => {
        setPageSize(size);
        setPage(1);
        // console.log('val, size', val, size);
        // console.log('page', page);
        // console.log('pageSize', pageSize);
        if(val === 1) {
            const params = {
                word: search,
                page: 1,
                per_page: size,
            };
            fetchData(params);
        } else {
            // useEffect auto update
        }
    };

demo

react-table-switch-partly-refresh

https://github.com/xgqfrms/react-hook-and-antd-table/blob/main/react-table-switch-partly-refresh/index.jsx

react-hooks-antd-table-switch-partly-refresh

https://github.com/xgqfrms/react-hook-and-antd-table/blob/main/react-hooks-antd-table-switch-partly-refresh/index.jsx

solutions

1. useEffect

    useEffect(() => {
        if(val === 1) {
            const params = {
                word: search,
                page: 1,
                per_page: pageSize,
            };
            fetchData(params);
        }
    }, [pageSize]);

    const onPageSizeChange = (val, size) => {
        setPage(1);
        setPageSize(size);
    };

2. callback

    const onPageSizeChange = (val, size) => {
        setPage(1);
        setPageSize(size, () => {
            if(val === 1) {
                const params = {
                    word: search,
                    page: page,
                    per_page: pageSize,
                };
                fetchData(params);
            }
        });
    };

refs

React Hooks useEffect 取消 Promise

https://www.cnblogs.com/xgqfrms/p/11693154.html

useState & useEffect

https://www.cnblogs.com/xgqfrms/p/11771834.html

https://www.cnblogs.com/xgqfrms/tag/React Hooks/

https://www.cnblogs.com/xgqfrms/tag/useEffect/

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---