如何使用堆栈跟踪来查找代码中的错误位置？

Question

这是使用React JS、Gatsby和Material UI。我只是浏览了一下代码，发现了代码中的每个.map()，代码中的每个.forEach()，并确保它们都有键。这是可能的，但我希望这种仅仅遍历代码中的每个地图或forEach的方法不是实现这一点的最实用的方法，并且不想再次这样做来查看我是否遗漏了一个。我还搜索了每个组件的内部。当我单击代码中的超链接时，它没有将我带到错误所在的位置，它看起来像是将我带到了一些幕后的东西。

我如何读取这个堆栈跟踪，以及将来以这种格式通用的堆栈跟踪？我对前端开发还是个新手，所以如果这个问题很明显的话，我很抱歉。

我正在寻找代码中生成此错误的行。

react-dom.development.js:67 Warning: Each child in a list should have a unique "key" prop. See https://reactjs.org/link/warning-keys for more information.
    at div
    at Grid (webpack-internal:///./node_modules/@material-ui/core/esm/Grid/Grid.js:235:35)
    at WithStyles (webpack-internal:///./node_modules/@material-ui/styles/esm/withStyles/withStyles.js:61:31)
    at div
    at Grid (webpack-internal:///./node_modules/@material-ui/core/esm/Grid/Grid.js:235:35)
    at WithStyles (webpack-internal:///./node_modules/@material-ui/styles/esm/withStyles/withStyles.js:61:31)
    at div
    at Grid (webpack-internal:///./node_modules/@material-ui/core/esm/Grid/Grid.js:235:35)
    at WithStyles (webpack-internal:///./node_modules/@material-ui/styles/esm/withStyles/withStyles.js:61:31)
    at div
    at div
    at Container (webpack-internal:///./node_modules/@material-ui/core/esm/Container/Container.js:84:23)
    at WithStyles (webpack-internal:///./node_modules/@material-ui/styles/esm/withStyles/withStyles.js:61:31)
    at ContentWrapper (webpack-internal:///./src/components/content-wrapper.js:26:23)
    at div
    at Grid (webpack-internal:///./node_modules/@material-ui/core/esm/Grid/Grid.js:235:35)
    at WithStyles (webpack-internal:///./node_modules/@material-ui/styles/esm/withStyles/withStyles.js:61:31)
    at Footer (webpack-internal:///./src/components/common/footer/index.js:127:28)
    at Layout (webpack-internal:///./src/components/Layout/index.js:28:23)
    at LandingTemplate (webpack-internal:///./src/templates/landing/index.js:105:23)
    at PageRenderer (webpack-internal:///./.cache/page-renderer.js:23:29)
    at PageQueryStore (webpack-internal:///./.cache/query-result-store.js:39:30)
    at RouteHandler
    at div
    at FocusHandlerImpl (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:359:5)
    at FocusHandler (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:330:19)
    at RouterImpl (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:235:5)
    at Location (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:64:23)
    at Router
    at ScrollHandler (webpack-internal:///./node_modules/gatsby-react-router-scroll/scroll-handler.js:36:35)
    at RouteUpdates (webpack-internal:///./.cache/navigation.js:286:32)
    at EnsureResources (webpack-internal:///./.cache/ensure-resources.js:22:30)
    at LocationHandler (webpack-internal:///./.cache/root.js:67:29)
    at Location (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:64:23)
    at Root
    at ThemeProvider (webpack-internal:///./node_modules/@material-ui/styles/esm/ThemeProvider/ThemeProvider.js:41:24)
    at TopLayout (webpack-internal:///./plugins/gatsby-plugin-top-layout/TopLayout.js:22:23)
    at StylesProvider (webpack-internal:///./node_modules/@material-ui/styles/esm/StylesProvider/StylesProvider.js:49:24)
    at GatedContentHandler (webpack-internal:///./src/utils/GatedContentHandler.js:31:23)
    at LocationProvider (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:84:5)
    at Location (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:64:23)
    at withLocation (webpack-internal:///./src/utils/GatedContentHandler.js:70:24)
    at eval (webpack-internal:///./src/components/Search/SearchContext.js:46:25)
    at SalesforceProvider (webpack-internal:///./src/components/Salesforce/SalesforceProvider.js:28:66)
    at CookiesProvider (webpack-internal:///./node_modules/react-cookie/es6/CookiesProvider.js:24:28)
    at AuthProvider (webpack-internal:///./src/utils/context/AuthContext.js:50:23)
    at ApolloProvider (webpack-internal:///./node_modules/@apollo/client/react/context/ApolloProvider.js:12:21)
    at Apollo (webpack-internal:///./src/providers/apollo.js:34:23)
    at StaticQueryStore (webpack-internal:///./.cache/query-result-store.js:127:32)
    at ErrorBoundary (webpack-internal:///./.cache/fast-refresh-overlay/components/error-boundary.js:24:35)
    at DevOverlay (webpack-internal:///./.cache/fast-refresh-overlay/index.js:114:23)
    at RootWrappedWithOverlayAndProvider
    at App (webpack-internal:///./.cache/app.js:209:68)

Answer 1

读取堆栈跟踪时，第一行将是抛出错误的位置。在本例中，它是一个内部React错误，试图告诉您在循环中缺少元素的键值。

当接近这种错误时，你可以从下到上开始阅读。在那里，您将注意到熟悉的组件，如App。如果您使用的是前端库，您最终会注意到它们在这个链中的组件，有时带有中间(内部)组件。

希望通过自下而上的方式，您可以找到for-loop (forEach，map)函数所在的位置。

另一个技巧是查看文件的路径。在这种情况下，错误很可能出在源代码中(而不是node_modules/中的代码)。在本例中，我敢打赌您的错误出在material-ui的Grid所在的Footer组件中