反应不会导致重新渲染的状态值答案

【问题标题】：React state value that does not cause a rerender反应不会导致重新渲染的状态值
【发布时间】：2020-10-19 03:34:44
【问题描述】：

我需要更新和跟踪不需要在useCallback 的依赖数组中的变量。

我目前正在使用一个分页系统，它将加载 x 数量的数据，如果有更多数据，请给前端下一个页码以请求更多数据。这有点尴尬，但我能用的就这些了。

如果我将projectId 和pageNumber 作为状态值，useCallback 钩子会希望它们在其依赖数组中，这将导致无限循环。那不好。所以我改用useRef，这显然是解决这个问题的方法。

问题在于，虽然这些值会在整个组件中更新，但 scrollToLoadMore 中的值永远不会改变。它始终为 0。我认为这是 React 很聪明，并且认为函数永远不需要重新渲染，因为它不包含状态值，但这有点妨碍我。

因此，如果我在组件中间抛出一个console.log(pageNumber)，它将正确显示新值。但功能永远不会改变。

抱歉，如果不清楚，希望代码能更好地说明我的意思。这是相当精简的，但我相信展示了所有相关的部分。

const IssueList: FunctionalComponent = () => {
    const projectId = useRef(0);
    const pageNumber = useRef(0);

    const fetchIssues = useCallback(
        async (append = false) => {
            const result = ...

            if (...) {
                if (append) {
                    // I set a component state value here
                } else {
                    // or here.
                }
                projectId.current = result.nextResource.projectId;
                pageNumber.current = result.nextResource.pageNumber;
            }
        },
        [...],
    );

    useEffect(() => {
        fetchIssues();
    }, [fetchIssues]);

    console.log(pageNumber.current); // Changes to '1' as expected

    function scrollToLoadMore(e: HTMLDivElement): void {
        // pageNumber.current always === 0
        if (e.scrollHeight - e.scrollTop === e.clientHeight && pageNumber.current !== 0) {
            fetchIssues(true);
        }
    }

    return (
        <div
            class="md:mr-4 rounded bg-white overflow-hidden shadow-lg overflow-y-scroll issuesList"
            onScroll={(e): void => scrollToLoadMore(e.target as HTMLDivElement)}
        >
            ...
        </div>
    );
};

export default IssueList;

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

抱歉，最终变成了一段我认为无关的代码。并不是我想要的值没有在我的scrollToLoadMore 函数中更新，而是在可以使用之前将值改回0。

【讨论】：