reactjs React -使用串联变量时未定义变量

oyjwcjzk  于 2023-01-04  发布在  React
关注(0)|答案(1)|浏览(133)
    • bounty将在4天后过期**。回答此问题可获得+50声望奖励。Kyle Underhill希望引起更多人关注此问题。

我试图通过将三个单独的 prop 连接到一个字符串中来在setAddress上运行convertAddress,但我收到一个错误,即isoCode未定义。
控制台为setAddress返回Simcoe,Ontario,Canada,但是,代码仅在将位置作为字符串传递时有效。这意味着setAddress存在问题,因为setAddress的控制台返回的字符串与我为test使用的字符串完全相同。为什么convertAddresstest上有效,而在setAddress上无效?

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

从控制台:

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

使用setAddress的原始代码:

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>

b4lqfgs4

b4lqfgs41#

如果函数对字符串test的处理效果如预期,那么可能的解决方案是查看setAdress变量。
拆分地址字符串,使用最后一个元素,即国家名称,过滤它,然后使用countryName[0]获得第一个国家名称,简单地说,countryName[0]不存在,这就是为什么您看到“isoCode”未定义。
organizationDetails从何而来毫无头绪;所以你要多给我们看一些代码,让大家深入调试。
我个人建议您使用TypeScript,这样您就可以在编译时级别捕获错误。
有一件事我可能猜到是你在setAddress中使用的可选链接。如果没有找到任何东西,那么它将返回undefined,这可能会导致你看到的类型错误。使用类型保护,这样它就不会返回undefined,因为这不是一个好的方法。
类型保护示例使用Nullish coalescing operator(??)

const city = organizationDetails?.cityDetails?.city ?? '';
const state = organizationDetails?.cityDetails?.state ?? '';
const country = organizationDetails?.cityDetails?.country ?? '';

const setAddress = `${city}, ${state}, ${country}`;

那么至少undefined不会出现。
最后,当你拆分一个名称用逗号分隔的字符串时,使用trim()来避免出现空格。(如果你不确定拆分项是否有空格)

相关问题