If/Else语句失效返回undefined及React重复渲染问题排查

一、普通JS代码返回undefined的原因 #

1. 变量作用域冲突：你在每个if/else块里都用let重新声明了countryName，这会创建块级作用域的局部变量，和外部的let countryName完全是两个独立变量。外部变量始终未被赋值，所以最终输出undefined。
2. 条件判断逻辑错误：country === 'Shqipëria' || 'hqipëria'这种写法不成立，逻辑或||的右侧是字符串'hqipëria'，它的布尔值为true，导致这个条件永远为真，不管country实际是什么值。正确写法应该是country === 'Shqipëria' || country === 'hqipëria'。

修复后的普通JS代码 #

可以统一转小写减少重复判断，或者用对象映射让代码更简洁：

// 方案1：优化if/else
let countryName;
const lowerCountry = country.toLowerCase();
if (lowerCountry === 'shqipëria') {
  countryName = 'Albania';
} else if (lowerCountry === 'hayastán') {
  countryName = 'Armenia';
} else if (lowerCountry === 'italia') {
  countryName = 'Italy';
} else if (lowerCountry === 'türkiye') {
  countryName = 'Turkey';
} else if (['ukraїna', 'україна', 'yкраїна'].includes(lowerCountry)) {
  countryName = 'Ukraine';
} else {
  countryName = country;
}

console.log(countryName);
console.log(country);

// 方案2：对象映射（更简洁）
const countryMap = {
  'shqipëria': 'Albania',
  'hayastán': 'Armenia',
  'italia': 'Italy',
  'türkiye': 'Turkey',
  'ukraїna': 'Ukraine',
  'україна': 'Ukraine',
  'yкраїна': 'Ukraine'
};
const lowerCountry = country.toLowerCase();
const countryName = countryMap[lowerCountry] || country;

console.log(countryName);
console.log(country);

二、React代码触发无限重渲染的原因 #

1. 直接在组件顶层调用setState：组件每次渲染时都会执行这些if/else逻辑并调用setCountryName，而setState会触发组件重新渲染，形成无限循环。
2. 同样存在条件判断逻辑错误：和普通JS代码的问题一致，条件写法错误导致逻辑失效。

修复后的React代码 #

推荐用useMemo处理派生状态，避免不必要的渲染：

import { useState, useMemo } from 'react';

// 组件内部
const [country, setCountry] = useState('Italia'); // 假设country是组件状态或props

const countryName = useMemo(() => {
  const countryMap = {
    'shqipëria': 'Albania',
    'hayastán': 'Armenia',
    'italia': 'Italy',
    'türkiye': 'Turkey',
    'ukraїna': 'Ukraine',
    'україна': 'Ukraine',
    'yкраїна': 'Ukraine'
  };
  const lowerCountry = country.toLowerCase();
  return countryMap[lowerCountry] || country;
}, [country]); // 仅当country变化时重新计算

console.log(countryName);
console.log(country);

如果country来自props或外部状态，也可以用useEffect：

import { useState, useEffect } from 'react';

const [countryName, setCountryName] = useState('');
const country = 'Italia'; // 假设来自props或其他外部状态

useEffect(() => {
  const countryMap = {
    'shqipëria': 'Albania',
    'hayastán': 'Armenia',
    'italia': 'Italy',
    'türkiye': 'Turkey',
    'ukraїna': 'Ukraine',
    'україна': 'Ukraine',
    'yкраїна': 'Ukraine'
  };
  const lowerCountry = country.toLowerCase();
  setCountryName(countryMap[lowerCountry] || country);
}, [country]); // 依赖country变化时执行

console.log(countryName);
console.log(country);

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