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

我已经尝试了几种解决方案，但似乎没有任何效果。

repo 是 here，该应用在 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>)}