React useEffect执行异常：无法按用户类型切换Material UI Paper样式

你遇到的问题核心是变量类型不匹配：

• funcao的初始状态是字符串类型的''
• 接口返回的TIPO_UTILIZADOR大概率是数字类型的0（或者字符串类型的'0'）
• 你用了严格相等运算符===，它会同时比较值和类型，所以'0' === 0或者'' === 0都会返回false，导致分支逻辑不执行。

修复方案 #

方案1：统一变量类型（推荐） #

把funcao的初始状态设为数字类型，同时在赋值时确保类型正确：

function SideBarLeft() {
  const style = useStyles();
  
  const [disableSearch, setDisableSearch] = useState(false);
  const [placeholder, setPlaceholder] = useState('Funcionário ou NIF');
  // 初始设为数字类型的null或0，避免类型偏差
  const [funcao, setFuncao] = useState(null);
  const [nome, setNome] = useState('');

  useEffect(() => {
    const token = localStorage.getItem('token');
    const decoded = jwt_decode(token);
    const id = decoded.user.ID;
    
    axios
        .get(`${API_BASE_URL}/user/${id}`) 
        .then((res) => {
          // 显式转成数字，确保类型统一
          setFuncao(Number(res.data.user.TIPO_UTILIZADOR));
          setNome(res.data.user.NOME_UTILIZADOR);
        })
        .catch((err) => {
          console.log(err);
        });
  }, []);

  useEffect(() => {
    // 先判断funcao不为null，再做严格相等判断
    if ( funcao !== null && funcao === 0 ) {
      console.log('funcao: ' + funcao)
      setDisableSearch(true);
      setPlaceholder(nome);
    } else {
      setDisableSearch(false);
      setPlaceholder('Funcionário ou NIF');
    }
  }, [ funcao, nome]);

  // ... 你的return部分代码
}

方案2：使用宽松相等运算符（快速生效但不推荐） #

如果不想改类型，把===换成==，它会自动做类型转换：

if ( funcao == 0 ) {
  // ... 逻辑代码
}

但这种方式容易埋下类型相关的隐性bug，不建议长期使用。

额外排查技巧 #

可以在useEffect里打印变量的实际类型，方便定位问题：

useEffect(() => {
  console.log('funcao类型:', typeof funcao, '值:', funcao);
  if ( funcao === 0 ) {
    // ...
  }
}, [funcao, nome]);

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