ErrorBox组件中使用useState+switch出现过多重渲染问题求助

这个问题我熟！你碰到的「Too many re-renders.」错误，本质是陷入了无限渲染循环：组件每次渲染时都会直接调用setStatus，而setStatus会触发组件重新渲染，循环往复停不下来。咱们来拆解原因，再给你几个靠谱的解决方案：

方案1：直接根据Props计算状态（最推荐） #

你的status完全由传入的ErrorReason props决定，属于派生状态，根本没必要用useState存储。直接计算状态既简洁又能避免循环问题：

写法一：用函数+switch计算 #

const ErrorBox = ({ ErrorReason }) => {
  const getStatus = () => {
    switch (ErrorReason) {
      case "wrong-password":
        return { icon: "lock", info: "Incorrect password", color: "#fff" };
      case "invalid-email":
        return { icon: "cross", info: "Invalid email", color: "#000" };
      case "too-many-request":
        return { icon: "user", info: "Too many incorrect requests", color: "#bbb" };
      default:
        return { icon: "", info: "", color: "" }; // 处理未匹配的情况
    }
  };

  const status = getStatus();

  return (
    <div>
      <Icon type={status.icon} style={{ color: `${status.color}` }} />
      {status.info}
    </div>
  );
};

写法二：用对象映射替代switch（更简洁） #

如果觉得switch不够优雅，用对象映射来匹配状态会更清爽：

const ErrorBox = ({ ErrorReason }) => {
  // 提前定义好错误原因和对应状态的映射关系
  const statusMap = {
    "wrong-password": { icon: "lock", info: "Incorrect password", color: "#fff" },
    "invalid-email": { icon: "cross", info: "Invalid email", color: "#000" },
    "too-many-request": { icon: "user", info: "Too many incorrect requests", color: "#bbb" },
    default: { icon: "", info: "", color: "" }
  };

  // 匹配状态，默认用default兜底
  const status = statusMap[ErrorReason] || statusMap.default;

  return (
    <div>
      <Icon type={status.icon} style={{ color: `${status.color}` }} />
      {status.info}
    </div>
  );
};

方案2：用useEffect监听Props变化（保留useState的场景） #

如果你因为某些原因必须保留useState，那就要用useEffect来限制setStatus的执行时机——只有当ErrorReason变化时才更新状态，避免每次渲染都触发：

import { useState, useEffect } from 'react';

const ErrorBox = ({ ErrorReason }) => {
  const [status, setStatus] = useState({});

  // 只在ErrorReason发生变化时执行状态更新逻辑
  useEffect(() => {
    switch (ErrorReason) {
      case "wrong-password":
        setStatus({ icon: "lock", info: "Incorrect password", color: "#fff" });
        break;
      case "invalid-email":
        setStatus({ icon: "cross", info: "Invalid email", color: "#000" });
        break;
      case "too-many-request":
        setStatus({ icon: "user", info: "Too many incorrect requests", color: "#bbb" });
        break;
      default:
        setStatus({ icon: "", info: "", color: "" });
    }
  }, [ErrorReason]); // 依赖数组：只有ErrorReason改变时才触发effect

  return (
    <div>
      <Icon type={status.icon} style={{ color: `${status.color}` }} />
      {status.info}
    </div>
  );
};

为什么方案1更优？ #

因为你的状态完全由外部props决定，没有内部状态的变化逻辑。直接计算派生状态的方式：

• 代码更简洁，减少不必要的state维护
• 避免了state与props不同步的潜在问题
• 性能更优，省去了useEffect的额外开销

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