React中useState数组无法设置为空的问题排查与求助

为什么setManuscriptsForReview([])没效果？ #

React的useState状态更新是异步的，且你的getManuscripts函数通过闭包捕获了调用时的manuscriptsForReview旧状态值。

当你在retrieveAllPreviousManuscripts里执行setManuscriptsForReview([])后，React不会立刻更新状态。紧接着循环调用getManuscripts时，每个getManuscripts里的manuscriptsForReview还是更新前的旧数组。后续执行setManuscriptsForReview([...manuscriptsForReview, ...newManuscripts])时，都是基于旧数组拼接新数据，相当于把清空操作的效果覆盖了，最终看起来清空没生效。

为什么直接修改manuscriptsForReview.length = 0能生效？ #

数组是引用类型，manuscriptsForReview指向内存中同一个数组对象。直接修改length = 0是直接篡改原状态数组，后续getManuscripts里的manuscriptsForReview还是这个被修改后的空数组，所以拼接新数据时是从空开始的。但这种方式违反React状态更新原则：永远不要直接修改state，必须通过setter函数更新。直接修改原状态会导致React无法正确追踪状态变化，可能引发渲染异常、状态不同步等隐藏问题，绝非可靠方案。

正确的解决方案 #

把getManuscripts里的状态更新改成函数式更新，确保每次更新都基于最新的状态值，而非闭包捕获的旧值：

const getManuscripts = (offset, limit) => {
    setLoadingInProgress(true);
    doFetch(
        `${someAPI()}?offset=${offset}&limit=${limit}`,
    )
        .then((response) => parseResponseObject(response, addError, false))
        .then(handleErrorResponses)
        .then((data) => {
            const newManuscripts = data.crowdsourcedManuscripts;
            // 函数式更新，prev参数为当前最新状态
            setManuscriptsForReview(prev => [...prev, ...newManuscripts]);
        })
        .catch((e) => {
            // someErrorHandling
        })
        .finally(() => {
            setLoadingInProgress(false)
        });
};

修改后，retrieveAllPreviousManuscripts里的setManuscriptsForReview([])会先触发状态更新，后续getManuscripts中的函数式更新会基于清空后的最新数组拼接新数据，完美实现先清空再重新填充的需求。

另外建议检查循环中的offset += defaultPageSize与终止条件offset < originalPageSize是否匹配，避免出现API调用次数异常的问题。

内容的提问来源于stack exchange，提问作者Phil S