我写了一个简单的React Redux Todo网络应用程序，这是它的GitHub存储库；它在我的桌面上运行良好，但当我将它发布到GitHub页面时，我得到的只是一个空白页面。有趣的是，我添加了一些console.log语句作为页面元素的呈现，它们显示在控制台上，但它们的页面片段没有。
我使用了Create React App Deployment页面中的说明，特别是GitHub Pages部分中的说明。
不是homepage属性、predeploy和deploy脚本，下面的gh-pages开发依赖项是我的package.json文件：
{
"name": "react_todo",
"author": "Rodrigo Silveira",
"version": "0.2.0",
"homepage": "https://rodrigomattososilveira.github.io/react-redux-todo/",
"private": true,
"license": "MIT",
"dependencies": {
"@material-ui/core": "^4.9.11",
"@material-ui/icons": "^4.9.1",
"classnames": "^2.2.6",
"material-table": "^1.57.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-redux": "^7.2.0",
"react-scripts": "3.4.1",
"redux": "^4.0.5",
"shortid": "^2.2.15",
"typeface-roboto": "^0.0.75"
},
"scripts": {
"start": "react-scripts start",
"predeploy": "yarn run build",
"deploy": "gh-pages -d build",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"@types/jest": "^24.0.0",
"@types/node": "^12.0.0",
"@types/react": "^16.9.0",
"@types/react-dom": "^16.9.0",
"@types/react-redux": "^7.1.7",
"@types/shortid": "^0.0.29",
"gh-pages": "^2.2.0",
"typescript": "~3.7.2"
}
}
另外请注意，我有一个React Todo应用程序，我可以使用与React Redux Todo完全相同的配方将其发布到自己的GitHub页面(https://github.com/RodrigoMattosoSilveira/react-redux-todo)堂弟。
如何调试React应用程序
在这种情况下，由于错误只在生产中发生过一次(部署在Github Pages上(，因此可能很难找到来源。
第一步是在控制台中查找错误，其中有：
未捕获错误：最小化React错误#152；参观https://reactjs.org/docs/error-decoder.html?invariant=152&args[]=完整消息的组件，或使用未缩小的开发环境来显示完整错误和其他有用的警告。
来自链接的完整错误消息是：
组件(…(：渲染未返回任何内容。这通常意味着缺少返回语句。或者，要不呈现任何内容，请返回null。
下一步是找出如何轻松地(希望是在本地(重现错误。
使用Create React App，您可以手动使用yarn build进行生产构建。它将把最终的静态文件编译到./build目录中。然后，您可以在本地机器上启动任何简单的HTTP服务器。就我个人而言，我使用http-server，它是我在全球安装的一个快速调试工具！
yarn build
http-server ./build
您应该能够在Github页面上看到相同的内容，但默认情况下是从http://127.0.0.1:8080/中看到的。
最后一步是搜索罪魁祸首代码。可能有更好的方法可以做到这一点，但这里有一种总是有效的方法。从最简单的代码开始，注释掉所有自己的代码。
const Root = () => (
<Provider store={store}>
{/* <TodoApp /> */}
</Provider>
);
然后再次测试构建。如果有效，则表示问题在<TodoApp />中。如果它不起作用，就意味着问题来自其他地方(可能是配置等(。
现在在TodoApp中，继续这个过程：注释一半的组件，测试构建，重新构建并重复，直到将搜索范围缩小到问题发生的最后一个地方。
这只是在调试上下文中应用的一个简单的二进制搜索。
您的代码出了什么问题
也就是说，我花了一些时间来测试存储库，问题来自TodoForm组件。
return ( // <div className="todo-form"> // <input // ref={inputRef} // type="text" // placeholder='Enter new todo' // onChange={event => handleInputOnChange(event)} // onKeyPress={event => handleInputOnKeyPress(event)} // /> // </div> <div className={classes.root} style={{marginTop: '10px', marginBottom: '10px'}}> <form noValidate autoComplete="off"> <div>
此JSX块开头的注释可能在最终构建中转换错误，这意味着组件缺少有效的返回值。
修复方法只是删除这些注释。