React拼接变量出现isoCode未定义：同字符串为何test正常setAddress异常？

我将三个独立属性拼接为字符串setAddress后调用convertAddress函数处理，却收到“isoCode未定义”的错误。控制台显示setAddress的值为Simcoe,Ontario,Canada，与测试用字符串test完全一致，但仅直接传入字符串时代码可正常运行。为何convertAddress能处理test，却无法处理setAddress？

测试代码 #

const test = 'Simcoe,Ontario,Canada';
const address = test ? convertAddress(test) : '';

控制台输出代码 #

console.log(setAddress + ' setAddress');
console.log(test + ' test');
console.log(address + ' result');

原始代码 #

export function convertAddress(myAddress) {
  const split = myAddress.split(',');

  const countryName = Country.getAllCountries().filter(
    (c) => c.name === split[split.length - 1].replace(' ', '')
  );

  const resultStateProvince = split[split.length - 2];

  const state = State.getStatesOfCountry(countryName[0].isoCode).filter((s) =>
    resultStateProvince.includes(s.name)
  );
  return `${split[split.length - 3]}${state.length > 0 ? `, ${state[0].isoCode}` : ''}`;
}
       
const setAddress =
  organizationDetails?.cityDetails?.city +
  ',' +
  organizationDetails?.stateDetails?.state +
  ',' +
  organizationDetails?.countryDetails?.country;
    
const address = setAddress ? convertAddress(setAddress) : '';
...
<span>{address}</span>

核心问题是拼接setAddress时，属性值可能携带了肉眼难以察觉的空格，或者属性为undefined导致拼接内容异常：

1. 硬编码的测试字符串test是完全规整的'Simcoe,Ontario,Canada'，没有多余空格，但organizationDetails里的属性（比如country）可能实际值是' Canada'（前面带空格）或'Canada '（后面带空格）。
2. 代码里用split[split.length - 1].replace(' ', '')只能替换第一个空格，如果是首尾多个空格，替换后仍会残留空格，导致Country.getAllCountries()过滤不到匹配项，countryName变成空数组。
3. 此时访问countryName[0].isoCode就会抛出“isoCode未定义”的错误——因为空数组的[0]是undefined，自然没有isoCode属性。

方案1：优化setAddress的拼接逻辑，提前清理空格并容错空值 #

用数组+join的方式拼接，同时给每个属性值做前后空格清理，还能过滤掉undefined的属性：

const setAddress = [
  organizationDetails?.cityDetails?.city?.trim(),
  organizationDetails?.stateDetails?.state?.trim(),
  organizationDetails?.countryDetails?.country?.trim()
].filter(Boolean).join(',');

方案2：增强convertAddress函数的容错性 #

在函数内部先清理每个拆分项的空格，同时增加空值判断，避免访问空数组的索引：

export function convertAddress(myAddress) {
  if (!myAddress) return '';
  
  // 拆分后先清理每个项的前后空格
  const split = myAddress.split(',').map(item => item.trim());
  
  const countryName = Country.getAllCountries().filter(
    (c) => c.name === split[split.length - 1]
  );

  // 没找到匹配国家时直接返回城市，避免报错
  if (!countryName.length) {
    return split[split.length - 3] || '';
  }

  const resultStateProvince = split[split.length - 2];

  const state = State.getStatesOfCountry(countryName[0].isoCode).filter((s) =>
    resultStateProvince.includes(s.name)
  );
  
  return `${split[split.length - 3]}${state.length > 0 ? `, ${state[0].isoCode}` : ''}`;
}

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