使用onClick事件编译React代码时可能出现“未定义”错误

编程问答 2022-08-14

问题描述

我正在解决Fluent UI导航链接问题，该问题在您使用React Router时出现。当您独立使用Nav组件时，一切正常。问题是当您尝试将其与React Router一起使用时-似乎没有正确的方法来修改Nav组件以显示和处理Router链接。 我在Github上的官方Fluent UI存储库中找到以下线程：https://github.com/microsoft/fluentui/issues/915

我正在尝试那里提供的其他解决方案，对我来说没有任何用。每一个都会在编译过程中导致某种错误。 我想使用的最新解决方案是：

typePolicies

在编译以上代码时，每次出现以下错误：

<Nav
    onLinkClick={(element,event) => {
        event.preventDefault();
        history.push(element.url);
    }}
    styles={navStyles}
    groups={navLinkGroups}
/>

是因为我正在使用Typescript吗？我应该改变什么？

解决方法

尝试使用可选链接：

event?.preventDefault()

可选的链接运算符提供了一种简化访问的方法 在可能的情况下通过连接的对象获取值 或函数可能未定义或为null。 来源：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

fluent-uionclickonclickonclickreact-routerreactjsreactjsreactjsreactjsundefinedundefinedundefined