如何避免useEffect修改状态值时触发无限重渲染

问题核心是你把数据加载逻辑和错误处理逻辑放在了同一个useEffect中，且依赖数组包含error。当错误被清除后，error状态变化触发useEffect重新执行，导致getProductDetails再次发起请求，请求失败又设置错误，形成循环。

解决方案：拆分useEffect #

将数据加载和错误处理拆分为两个独立的useEffect，让各自的依赖更精准：

1. 数据加载的useEffect：仅在组件挂载或id变化时触发请求，不依赖error。
2. 错误处理的useEffect：仅在error变化时触发提示并清除错误。

修改后的component.js代码：

const dispatch = useDispatch();

const { id } = useParams();
const { error, product, loading } = useSelector(
    (state) => state.productDetailReducer
);

// 仅在组件挂载/ id变化时加载数据
useEffect(() => {
    getProductDetails(dispatch, id);
}, [dispatch, id]);

// 仅在error存在时处理提示和清除
useEffect(() => {
    if (error) {
        toast.error(error);
        clearAllErrors(dispatch); // 修正拼写错误：原代码写为clearAllError
    }
}, [dispatch, error]);

额外注意点 #

• 修正了代码中的拼写错误：clearAllError → clearAllErrors（与ActionFile.js中的函数名保持一致）。
• 拆分后，数据加载逻辑不会因错误状态变化重复执行，彻底切断循环链条。

另一种可选方案：使用useRef跟踪错误处理状态 #

如果不想拆分useEffect，可以用useRef标记当前错误是否已经被处理过，避免重复触发：

const dispatch = useDispatch();
const { id } = useParams();
const { error, product, loading } = useSelector(state => state.productDetailReducer);
const errorHandled = useRef(false);

useEffect(() => {
    getProductDetails(dispatch, id);

    if (error && !errorHandled.current) {
        toast.error(error);
        clearAllErrors(dispatch);
        errorHandled.current = true;
    }

    // 当error变为null时重置标记
    if (!error) {
        errorHandled.current = false;
    }
}, [dispatch, id, error]);

不过这种方案不如拆分useEffect直观，推荐优先使用第一种方法。

内容的提问来源于stack exchange，提问作者Saksham Gupta