太多的重新渲染。 将 switch 语句与 useState() 一起使用

Question

I have an ErrorBox component that is purely displaying the error with the specified attributes. The expected output should be that depending on the ErrorReason it will display the associated color, icon and info

const ErrorBox = ({ ErrorReason }) => {

  const [status, setStatus] = useState({})
  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;
  }

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

Answer 1

The problem is that you're starting with the state {} and then immediately modifying it.

You don't need to want state here at all. Just use the error reason:

const ErrorBox = ({ ErrorReason }) => {
  let icon, info, color;
  switch (ErrorReason) {
    case "wrong-password":
      icon = "lock";
      info = "Incorrect password";
      color = "#fff";
      break;
    case "invalid-email":
      icon = "cross";
      info = "Invalid email";
      color = "#000";
      break;
    case "too-many-request":
      icon = "user";
      info = "Too many incorrect requests";
      color = "#bbb";
      break;
    default:
      // Must throw here
      throw new Error(`Invalid ErrorReason: ${ErrorReason}`);
  }

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

But if you did need state, you'd do the switch first and then use the value as the initial value of the state:

// If you needed state for some reason (you don't below)
const ErrorBox = ({ ErrorReason }) => {

  let initialStatus;
  switch (ErrorReason) {
    case "wrong-password":
      initialStatus = {
        icon: "lock",
        info: "Incorrect password",
        color: "#fff"
      };
      break;
    case "invalid-email":
      initialStatus = {
        icon: "cross",
        info: "Invalid email",
        color: "#000"
      };
      break;
    case "too-many-request":
      initialStatus = {
        icon: "user",
        info: "Too many incorrect requests",
        color: "#bbb"
      };
      break;
    default:
      // Must throw here
      throw new Error(`Invalid ErrorReason: ${ErrorReason}`);
  }
  const [status, setStatus] = useState(initialStatus);

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

---

I don't think I'd use a switch to map the ErrorReason to error information at all, I'd use a map (or an object created with Object.create(null) ):

const statusInfoMap = new Map([
  [
    "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"
    }
  ]
]);

Then the component is just:

const ErrorBox = ({ ErrorReason }) => {
  const status = statusInfoMap.get(ErrorReason);
  if (!status) {
    throw new Error(`Invalid ErrorReason: ${ErrorReason}`);
  }

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

Live Example:

 const {useState, useCallback} = React; const statusInfoMap = new Map([ [ "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" } ] ]); const ErrorBox = ({ ErrorReason }) => { const status = statusInfoMap.get(ErrorReason); if (!status) { throw new Error(`Invalid ErrorReason: ${ErrorReason}`); } const {icon, color, info} = status; return ( <div > icon: {icon}, color: {color}, info: {info} </div> ); }; const errors = [ "wrong-password", "invalid-email", "too-many-request", ]; const Example = () => { const [index, setIndex] = useState(0); const error = errors[index]; const onClick = useCallback(() => { setIndex(index + 1); }, [index]); return ( <div> <ErrorBox ErrorReason={error} /> {index < errors.length - 1 ? <input type="button" value="Next" onClick={onClick} /> : <input type="button" value="Start Again" onClick={() => setIndex(0)} /> } </div> ); }; ReactDOM.render(<Example />, document.getElementById("root"));

 <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.10.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.2/umd/react-dom.production.min.js"></script>

Or if you need state for something you haven't shown:

const ErrorBox = ({ ErrorReason }) => {
  const initialStatus = statusInfoMap.get(ErrorReason);
  if (!initialStatus) {
    throw new Error(`Invalid ErrorReason: ${ErrorReason}`);
  }
  const [status, setStatus] = useState(initialStatus);

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

Answer 2

You should perform state update only when ErrorReason changes. In this scenario use useEffect hook and add ErrorReason as dependency.

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;
  }
}, [ErrorReason])

Update: To avoid local state and variables.

const ErrorBox = ({ ErrorReason }) => {

  const getData = () => {
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"
      });
  }}


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