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

【问题标题】：How to have a common state between two React custom Hooks?如何在两个 React 自定义 Hooks 之间有一个共同的状态？
【发布时间】：2019-05-17 19:32:42
【问题描述】：

我有两个自定义 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 已在第一个声明中声明。如何设置，使两者之间有一个共同的状态？

【问题讨论】：

我对你的代码有点困惑，因为它看起来根本不像应该用状态（或效果）来做的事情。看起来您应该只有一个页面状态，然后执行const nextPage = page + 1、const prevPage = page - 1。

标签： javascript reactjs react-hooks

【解决方案1】：

只用一个钩子？

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

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

【讨论】：