React项目在GitHub页面上显示空白页面

你的问题就在这里 App.js

const [contacts, setContacts] = useState(
  JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY))
);

您没有做任何事情来处理本地存储中没有任何内容的初始情况。

这导致 null contacts 支持 ContactList . 那里试图使用的代码 props.contacts.map() 这导致了您在浏览器控制台中看到的错误。。。

无法读取null的属性(读取“map”)
在x(ContactList.js:9:46)

我建议在以下情况下默认为空数组: getItem() 退货 无效的

const [contacts, setContacts] = useState(
  JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY)) ?? []
);

另一个建议是使用TypeScript,它会警告您 localStorage 返回 无效的 价值观

我认为它部署得很好,但ContactsList组件中有一个错误。看看控制台。 TypeError:e.contacts为空