如何在两个 React 自定义 Hooks 之间有一个共同的状态？

Question

我有两个自定义 Hooks，用于接收整数并在返回值之前将其加 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 自定义 Hooks 之间有一个共同的状态？

How to have a common state between two React custom Hooks?

javascript

reactjs

react-hooks