React中因本地状态变化引发无限渲染的修复方案咨询

架构老林

2026-7-22

解决React无限渲染问题

问题根源

你的代码出现无限渲染的核心原因是在组件渲染阶段直接修改状态：

B组件中if(props.enteredTxt.length==3) setFlip(!flip);会在每次组件渲染时执行
当enteredTxt长度等于3时，每次渲染都会触发setFlip，触发「状态更新→重新渲染→再次执行setFlip」的无限循环
依赖flip的useEffect会跟着反复执行，进一步加剧循环

解决方案

方案1：将状态修改逻辑移至useEffect

把修改flip的逻辑放到useEffect中，仅当enteredTxt变化时才检查并更新状态，避免渲染阶段修改状态：

B = (props) => {
  const [words, setWords] = useState([]);
  const [flip, setFlip] = useState(true);

  // 仅在enteredTxt变化时检查是否需要翻转flip
  useEffect(() => {
    if (props.enteredTxt.length === 3) {
      setFlip(prev => !prev); // 函数式更新确保基于最新状态修改
    }
  }, [props.enteredTxt]);

  // 当flip变化时更新words
  useEffect(() => {
    setWords(arrayGen(flip));
  }, [flip])

  return <div>{words}</div>;
};

方案2：移除冗余状态，用useMemo推导结果

既然words完全由flip决定，不需要单独维护words状态，直接用useMemo推导即可，减少不必要的状态更新：

B = (props) => {
  const [flip, setFlip] = useState(true);

  useEffect(() => {
    if (props.enteredTxt.length === 3) {
      setFlip(prev => !prev);
    }
  }, [props.enteredTxt]);

  // 直接根据flip推导words，无需维护单独状态
  const words = useMemo(() => arrayGen(flip), [flip]);

  return <div>{words}</div>;
};