Question

我有两个自定义的Hook，用于接收整数，然后在返回值之前将1加或减1。该值必须在两个Hook之间共享，以便一个可以记住另一个已添加或减去的值。

function usePrevPage(page) {
    const [lastPage, setLastPage] = useState(page);
    const handleLastPage = () => {
        setLastPage(page => page - 1);
    }
    useEffect(() => {
      handleLastPage();
    },[page]);
    return [lastPage, handleLastPage];
}

function useNextPage(page) {
    const [nextPage, setNextPage] = useState(page);
    const handleNextPage = () => {
        setNextPage(page => page + 1);
    }
    useEffect(() => {
      handleNextPage();
    },[page]);
    return [nextPage, handleNextPage];
}

当前，具有相同的变量会相互冲突。例如，

const [page, handleLastPage] = usePrevPage(2)
const [page, handleNextPage] = useNextPage(2)

不允许使用

，因为第一个已经声明了page。如何设置以便两者之间有一个共同的状态？

Answer 1

仅使用一个挂钩？

function usePage(initial) {
    const [page, setPage] = useState(initial);
    return [page, () => setPage(page - 1), () => setPage(page + 1)];
}

//...
const [page, prev, next] = usePage(1);

如何在两个React自定义挂钩之间具有共同的状态？

1 个答案: