处理 React 属性 toString 或类似方法的更好方法

Question

我自己作为初学者正在修复一些反应组件，在这个特定的文章中有一个信息列，显示联系链接和企业信息。

如果从 API 传递的每个值的长度，我想要在元素呈现的返回语句之后隐藏列。 这就是为什么我尝试 .length 方法。

主要问题是当我尝试在 business.email.toString 之类的东西上使用 toString 方法时，属性给了我 TypeErrors。 准确地说，错误是：

类型错误：无法读取未定义的属性“toString”

我选择了另一种在此之前有效的方法，在所有 4 个属性中应用类似于以下内容：

  business.email = new String(business.email).valueOf();

但是，我意识到以这种方式使用对象可能会影响性能。 当前的解决方案不使用该 String 对象方法，但如果这些属性之一为空，则可能会变成错误。 我意识到这可能与 React State 及其钩子有关，或者我没有以正确的方式使用 props，因为我仍在使用它们的学习路径上。

我感谢任何和所有输入的更好的方法来做到这一点！

这是当前的代码部分。

//Imports


interface Props {
  top?: boolean;
}

const BussinesDescription: FC<Props> = (props) => {
  const locBusiness: BusinessModel = useSelector(
    (state: any) => state.locationsReducer.business
  );
  const [business, setBusiness] = useState<any>([]);

  useEffect(() => {
    if (!locBusiness || !locBusiness.id) return;
    BusinessHomepageAPI.getHomepage(locBusiness.id).then((response) => {
      setBusiness(response.data);
    });
  }, [locBusiness]);

  function addhttp(url: string) {
    ...
    return url;
  }

  business.web_page = addhttp('' + business.web_page);
  business.phone_number = '' + business.phone_number;
  business.whatsapp_number = ''+ business.whatsapp_number;
  business.email = ''+ business.email;

  return (
    <Col className={props.top ? style._contactUs1 : style._contactUs2}>
      {business.phone_number.length > 4 ||
      business.whatsapp_number.length > 4 ||
      business.email.length > 4 ||
      business.web_page.length > 10 ? (
        <span className={`${style.__container} ${style.__title}`}>
          <Translate id="BusinessInfo.ContactUs" />
        </span>
      ) : null}
    ...
    //rest of render and visual elements

Answer 1

类型错误：无法读取未定义的属性“toString”

当您尝试对当前未定义的内容调用方法或属性时，会引发此错误。

根据它的使用位置，您可以使用if语句、三元语句或可选链接来解决此问题。

if 语句

// Create variable to store value (initialise with preferred default).
let email = undefined;

// Check if property is 'truthy', which in this case should mean it has a value.
if (business.email) {

    // Use 'toString()' on a value you know not to be 'undefined'.
    email = business.email.toString();
}

三元语句

// Same as an if statement above but more compact.
// May be better or worse depending on coding principles / standards
const email = business.email ?      // The condition (check property is turthy)
    business.email.toString() :     // If the condition is true (use 'toString()')
    undefined;                      // If the condition is false (use default)

// Can be written on a single line
const anotherEmail = business.email ? business.email.toString() : undefined;

可选链

// Shorter / neater than the other two options.
// This does not give you control to change the default value if 
// 'business.email' is not defined.
const email = business.email?.toString();

// This can essentially be written as a ternary statement
const email = busness.email !== null && business.email !== undefined ? 
    business.email.toString() : 
    undefined;

// To change the default value you can assigned when 'business.email' 
// is undefined you can group with a null-coalescing operator.
const email = business.email?.toString() ?? 'default@email.com';