时间戳

首页 > 解决方案 > 使用 onClick 事件编译 React 代码时可能出现“未定义”错误

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

问题描述

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

我正在尝试人们在那里提出的不同解决方案，对我来说没有任何效果。在编译过程中，每一个都会导致某种错误。我想使用的最近的解决方案是：

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

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

Object is possibly 'undefined'.  TS2532

52 |                <Nav
53 |                    onLinkClick={(element, event) => {
54 |                            event.preventDefault();
   |                            ^
55 |                            history.push(element.url);
56 |                      }}
57 |                    styles={navStyles}

是因为我使用的是打字稿吗？我应该改变什么？

标签： reactjsreact-routeronclickundefinedfluent-ui

解决方案

尝试使用可选链接：

event?.preventDefault()

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

推荐阅读