React 应用程序在本地构建没有问题，但在 Heroku 上崩溃

Question

我构建了一个 React / Express 应用程序，它在我的本地机器上运行得很好。 API 全部连接起来，Heroku 识别所有这些，但是当 Heroku 尝试将对象数组映射到 React 组件时，它会失败并出现以下非常无用的错误：

TypeError: d is null
    h NoteList.jsx:130
    React 8
        ai
        Bi
        $l
        Ou
        xu
        Su
        vu
        Qa
    unstable_runWithPriority scheduler.production.min.js:18
    React 5
        Va
        Qa
        $a
        fu
        Ni
    e NoteList.jsx:21
    s runtime.js:63
    _invoke runtime.js:293
    E runtime.js:118
    Babel 2

我尝试了几种解决方案，但似乎都没有用。

回购是 here, the app is live on Heroku。

麻烦的一段代码好像在client/src/Components/NoteList.jsx中。它通过 localforage 从本地存储中获取笔记，如下所示：

const getLocalNotes = async () => {
        try {
            setLoading(true)
            const notes = await localforage.getItem("notes");
            setLoading(false);
            setNoteList(notes);
        } catch (error) {
            console.error(error);
        }
    }

...稍后似乎在第 130 行抛出错误：

            { loading ? <p>Loading</p> :  
                <div id="note-list">

                    {noteList.map(note =>
                                    <Note
                                        key={note.id}
                                        id={note.id}
                                        text={note.text}
                                        deleteNote={deleteNote}
                                        editNote={editNote} /> 
                                    )}
                </div>
            }

我对所有这些都很陌生——这个应用程序是全栈开发人员课程的最后一个项目——如果我错过了一些明显的东西，我深表歉意。

Answer 1

您可以添加一个 && 条件，因为您的 noteList 即将到来 undefined，然后您在其上应用 map()，导致错误 -

错误 - Cannot read property 'map' of null

修正-

{noteList && noteList.map(x => <your code>)}

React 应用程序在本地构建没有问题，但在 Heroku 上崩溃

React app builds locally without issue, but crashes on Heroku

heroku

reactjs

localforage