switch 语句在满足条件时不返回任何内容

Question

console.log(text.length); 的结果给了我正确的值，console.log(label); 的结果也是如此

当我这样做时：

switch (label) {
    case 'Username':
        console.log('success');
        break;
}

我得到了我正在寻找的标签。代码如下：

import './ErrorMsg.css';
import { useState } from 'react';

const ErrorMsg = ({ label, text }) => {
    const [msg, setMsg] = useState('');
    console.log(text.length);
    console.log(label);
    switch (label) {
        case 'Username':
            switch (text) {
                case text.length > 5:
                    setMsg('SUCCESS');
                    break;
            }
    }

    return <p>{msg}</p>;
};

export default ErrorMsg;

它不断返回一个空值。有什么想法吗？

Answer 1

case text.length > 5 指的是真值或假值，这意味着文本必须具有该值（检查 switch 语句时）。因此，您应该使用 if 语句。另外，一定要把这个语句放在useEffect里面，否则会导致无限重渲染循环。下面是一个有效的实现：

import React, { useEffect, useState } from "react";

const ErrorMsg = ({ label, text }) => {
  const [msg, setMsg] = useState("");

  console.log(label, text);

  useEffect(() => {
    switch (label) {
      case "Username":
        if (text.length > 5) {
          setMsg("SUCCESS");
          console.log("HERE");
        }
        break;
    }
  }, [text])


  return <p>{msg}</p>;
};

export default ErrorMsg;