React更新state触发无限循环问题的解决方案咨询

先明确问题根源和对应解决方案：

为什么会触发无限循环？ #

1. 直接在组件渲染逻辑里调用setQuestionRange：每次组件渲染都会执行这段代码，修改state又会触发新一轮渲染，形成死循环。
2. 单纯判断items.length > 0：如果items是每次渲染都重新生成的新数组（比如处理pricingData时每次都返回新数组），即使内容没变，引用也会不同，导致判断条件每次都成立，重复触发setState。
3. 直接监听items的useEffect：同样因为items每次都是新数组，useEffect会反复执行，setQuestionRange触发渲染后又生成新items，循环往复。

具体解决方案 #

第一步：用useMemo缓存处理后的items #

确保只有当原始的pricingData变化时，才重新生成items，避免每次渲染都产生新数组：

import { useMemo } from 'react';

// 从redux中获取pricingData
const pricingData = useSelector(state => state.yourReducer.pricingData);

// 用useMemo缓存处理后的items
const items = useMemo(() => {
  // 这里写你处理pricingData的逻辑，比如转换格式、过滤等
  return pricingData.map(item => /* 你的处理代码 */);
}, [pricingData]); // 仅当pricingData变化时，才重新计算items

第二步：用useEffect加条件判断更新state #

在useEffect里同时监听items和questionRange，只有当items有效且内容和当前questionRange不同时，才更新state：

import { useEffect } from 'react';

useEffect(() => {
  // 两个条件：items有数据，且新值和当前state不同
  if (items.length > 0 && items[0] !== questionRange) {
    setQuestionRange(items[0]);
  }
}, [items, questionRange]); // 依赖items和当前state，避免无意义的重复执行

额外检查：确保redux中的pricingData不会被不必要更新 #

如果redux的reducer每次处理action时都返回新的pricingData对象（即使内容和之前一致），会导致useMemo重新计算items。可以在reducer里做浅/深比较，比如：

// reducer示例
const yourReducer = (state, action) => {
  switch (action.type) {
    case 'FETCH_PRICING_SUCCESS':
      // 复杂数据可改用lodash的isEqual做深比较
      if (JSON.stringify(state.pricingData) === JSON.stringify(action.payload)) {
        return state;
      }
      return { ...state, pricingData: action.payload };
    default:
      return state;
  }
};

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