Question

使用this.setState更新对象后出现问题。

状态更改后，似乎我的对象正在使用新对象进行更新，但是随后它返回到render调用的函数，该函数正在映射组件的“视图”。

地图功能似乎在回到重新渲染时突然变成未定义。

会发生什么？好像我的组件刚刚失去了地图功能

Error log:

    SearchResult.tsx:113 Uncaught TypeError: testStories.map is not a function
        at SearchResult.renderStoriesResults (SearchResult.tsx:113)
        at SearchResult.renderShowResults (SearchResult.tsx:192)
        at SearchResult.render (SearchResult.tsx:211)
        at finishClassComponent (react-dom.development.js:13194)
        at updateClassComponent (react-dom.development.js:13156)
        at beginWork (react-dom.development.js:13825)
        at performUnitOfWork (react-dom.development.js:15864)
        at workLoop (react-dom.development.js:15903)
        at HTMLUnknownElement.callCallback (react-dom.development.js:100)
        at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
    SearchResult.renderStoriesResults @ SearchResult.tsx:113
    SearchResult.renderShowResults @ SearchResult.tsx:192
    SearchResult.render @ SearchResult.tsx:211
    finishClassComponent @ react-dom.development.js:13194
    updateClassComponent @ react-dom.development.js:13156
    beginWork @ react-dom.development.js:13825
    performUnitOfWork @ react-dom.development.js:15864
    workLoop @ react-dom.development.js:15903
    callCallback @ react-dom.development.js:100
    invokeGuardedCallbackDev @ react-dom.development.js:138
    invokeGuardedCallback @ react-dom.development.js:187
    replayUnitOfWork @ react-dom.development.js:15311
    renderRoot @ react-dom.development.js:15963
    performWorkOnRoot @ react-dom.development.js:16561
    performWork @ react-dom.development.js:16483
    performSyncWork @ react-dom.development.js:16455
    interactiveUpdates$1 @ react-dom.development.js:16720
    interactiveUpdates @ react-dom.development.js:2150
    dispatchInteractiveEvent @ react-dom.development.js:4533
    react-dom.development.js:14227 The above error occurred in the <SearchResult> component:
        in SearchResult

    Consider adding an error boundary to your tree to customize error handling behavior.
boundaries.
    logCapturedError @ react-dom.development.js:14227
    logError @ react-dom.development.js:14266
    update.callback @ react-dom.development.js:14919
    callCallback @ react-dom.development.js:10879
    commitUpdateQueue @ react-dom.development.js:10923
    commitLifeCycles @ react-dom.development.js:14397
    commitAllLifeCycles @ react-dom.development.js:15463
    callCallback @ react-dom.development.js:100
    invokeGuardedCallbackDev @ react-dom.development.js:138
    invokeGuardedCallback @ react-dom.development.js:187
    commitRoot @ react-dom.development.js:15604
    completeRoot @ react-dom.development.js:16619
    performWorkOnRoot @ react-dom.development.js:16564
    performWork @ react-dom.development.js:16483
    performSyncWork @ react-dom.development.js:16455
    interactiveUpdates$1 @ react-dom.development.js:16720
    interactiveUpdates @ react-dom.development.js:2150
    dispatchInteractiveEvent @ react-dom.development.js:4533
    SearchResult.tsx:113 Uncaught TypeError: testStories.map is not a function
        at SearchResult.renderStoriesResults (SearchResult.tsx:113)
        at SearchResult.renderShowResults (SearchResult.tsx:192)
        at SearchResult.render (SearchResult.tsx:211)
        at finishClassComponent (react-dom.development.js:13194)
        at updateClassComponent (react-dom.development.js:13156)
        at beginWork (react-dom.development.js:13825)
        at performUnitOfWork (react-dom.development.js:15864)
        at workLoop (react-dom.development.js:15903)
        at renderRoot (react-dom.development.js:15943)
        at performWorkOnRoot (react-dom.development.js:16561)

Answer 1

答案在错误跟踪的第二行。

SearchResult.tsx:113 Uncaught TypeError: testStories.map is not a function

举个例子：

let foo = {}; 
foo.map(); //"Uncaught TypeError: foo.map is not a function",

因此很简单，您在此处引用的对象（testStories）存在，但是没有名为.map的函数。

请注意，.map()是数组的函数，而不是Object的函数。

删除React包装器div

1 个答案: