当我们的React 16代码库中出现错误时,它会被我们的顶级错误边界捕获.ErrorBoundary发生这种情况时,组件会愉快地呈现错误页面.
ErrorBoundary所在的位置
return (
<Provider store={configureStore()}>
<ErrorBoundary>
<Router history={browserHistory}>{routes}</Router>
</ErrorBoundary>
</Provider>
)
但是,使用浏览器后退按钮(单击一次)导航回来时,URL会在地址中更改,但页面不会更新.
我已经尝试将错误边界向下移动到组件树,但此问题仍然存在.
关于这个问题在哪里的任何线索？
有一个jpm库,预先构建并在npm上可用,我希望用/ debug开发.在我的情况下,它是openlayers.
在需要javascript文件并想要调试的经典方法中,只需将脚本URL从生产版本切换到调试版本,即:
至
但是,当使用webpack然后通过npm导入时:
import openlayers from 'openlayers'
获取库的生产分布,与上面的ol.js脚本相同.
另外,要阻止webpack尝试解析预构建的库并发出警告,必须包含以下内容:
// Squash OL whinging
webpackConfig.module.noParse = [
/\/dist\/ol.*\.js/, // openlayers is pre-built
]
回到手头的问题:如何有条件地为预建和导入的模块加载不同的入口点？
当然,我可以用hacky的方式做到这一点.进入node_modules/openlayers/package.json并从中切换浏览器字段
"browser": "dist/ol.js",
至
"browser": "dist/ol-debug.js",
有没有办法可以通过webpack或使用不同的导入语法请求不同的入口点？根据规范,我是否首先要请求图书馆维护者更新浏览器字段以允许不同的入口点提示到浏览器？https://github.com/defunctzombie/package-browser-field-spec
关于更有效地实现这一目标的想法？希望能够以编程方式基于env变量切换库的生产和调试版本的加载.
更改应用程序状态时，子组件（MapLeftNav，Map）不会重新呈现。它具有一个父组件（MapView）和多个同级组件。
假设：
1）应用程序状态正在更改并由Redux跟踪
2）我的reducer不仅仅是突变状态（要点在这里）
-Redux开发人员工具和Parent（connected compoent）乐于接受更改
case NEW_MESSAGES:
return reduceVehicleMessagesToVehicles(state, action.payload)
然后该函数返回：
return {
vehicles: updatedVehicles,
traces: updatedTraces,
vehicleMessagesLoading: messagesLoading,
}
3）父组件（MapView，这里的要点）正在接收新的道具，而不是子MapLeftNav
我console.log道具，它们在父组件中发生变化
我写了一个假的componentWillReceiveProps (nextProps)
{console.log(nextProps)}，子MapLeftNav组件从不触发该函数。
<MapLeftNav
mapState={mainMap}
push={push}
vehicles={vehiclesState.vehicles}
updateCounter={vehiclesState.updateCounter}
/>
4）MapLeftNav组件，根据要求：https ://gist.github.com/thomasgwatson/36d8f6dbd64b0f6425b4beef56075acd
使用React，Redux，React-Redux绑定，react-redux开发工具，材料UI等。我已经使用React约18个月，使用Redux已有两个月。
当我直接connect重新链接到子组件时，一切正常。当我只是将它们传递给父组件并尝试将应用程序状态作为道具传递时，子组件似乎并没有注册状态更改。
据我了解，我不必让connect所有组件都能够使用redux存储中保存的应用程序状态！关于可能的问题根源的任何提示？
上下文：使用 webpack 4 尝试 RR4 (devServer: {apiHistoryFallback: true} Webpack 4 配置示例
http://localhost:8080/reports在剪切并粘贴到地址栏时有效（又名历史回退正在工作），我可以单击 /reports/8 的链接，因为我已在 /reports 处添加了到组件的嵌套路由
<Route path=${match.path}/:reportId component={ReportDetail}/>
但是将http://localhost:8080/reports/9剪切并粘贴到地址栏中，我得到一个空白屏幕和一个：
Refused to execute script from 'http://localhost:8080/reports/main.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
尝试为 devServer 设置 contentBase 但这并没有解决问题。
此功能在 Webpack 3 和 RR3 中运行良好。不确定是否要吠叫 Webpack 或 React Router 树。