Question

我创建了一个费用跟踪器应用程序，它在开发过程中没有错误。问题是我无法在 github 中部署它。我按照以下步骤进行部署，当我部署其他应用程序时它工作正常。使用 yarn add gh-pages

添加了 gh-pages

"homepage": "https://githubusername.github.io/expense-tracker"
"predeploy": "yarn run build",
"deploy": "gh-pages -d build",
git add status
git add .
git commit 
and push origin master

现在，当我打开部署应用程序的 url 时，我只能看到一个空白页面，并且当我检查几乎没有错误时；

<块引用>

TypeError: 无法读取未定义的属性 'map'

<块引用>

类型错误：无法读取未定义的属性“长度”

https://github.com/sohailshams/expense-tracker

部署的网址：https://sohailshams.github.io/expense-tracker/

在开发过程中没有错误，任何人都可以帮助我部署此应用程序并帮助我解决问题。

Answer 1

浏览代码，我发现您没有在 this function 上返回正确的值。我尝试在关键“状态”下在本地存储上加载您的初始状态，并且效果很好。

所以正确的解决方案是

  const [state, dispatch] = useReducer(AppReducer, initialState, (emptyState) => {
    const localData = localStorage.getItem('state');
    return localData ? JSON.parse(localData) : emptyState;
  });

我认为主要问题与这样一个事实有关，即您期望一个带有事务键的对象，但您传递的是一个空数组。

如果它不起作用，请告诉我。我很乐意提供帮助。

Answer 2

您传递给 useReducer 的 init 函数应该接受 initialState 作为第一个参数，如果在 localStorage 中找不到任何内容，则返回该参数。

  const [state, dispatch] = useReducer(AppReducer, initialState, (initial) => {
    const localData = localStorage.getItem('state');
    return localData ? JSON.parse(localData) : initial;
  });

请参阅 lazy-initialization（这是您使用的语法）

在 github 上部署应用程序时出现空白页面

2 个答案: