我正在使用Redux开发同构的React应用程序,即使在之前的模块中也使用了完全相同的代码,也遇到了Promise错误。
在这里,我通过fetchMobile操作获取数据,并通过该操作更新商店数据。
而loaddata函数用于在服务器上运行连接。
class MobilesList extends Component {
componentDidMount() {
this.props.fetchMobiles();
}
...
}
function mapStateToProps(state) {
// console.log(state); //i can get data in state
return { mobile: state.mobile };
}
function loadData(store,id) {
return store.dispatch(fetchMobiles());
}
export default {
loadData,
component: connect(mapStateToProps, { fetchMobiles,fetchMobilesPage })(MobilesList)
};
我遇到的错误是:
*Error-1 : The above error occurred in the <MobilesList> component:
in MobilesList (created by Connect(MobilesList))
in Connect(MobilesList) (created by Route)
in Route (created by App)
in Switch (created by App)
in div (created by App)
in App (created by Route)
in Route
in Switch
in div
in Router (created by BrowserRouter)
in BrowserRouter
in Provider
Consider adding an error boundary to your tree to customize error handling behavior.
You can learn more about error boundaries
Error-2 : Uncaught (in promise) TypeError: Cannot read property 'file' of undefined
at bundle.js:41672
at Array.map (<anonymous>)
at MobilesList.renderPosts (bundle.js:41659)
at MobilesList.render (bundle.js:41716)
at finishClassComponent (bundle.js:27178)
at updateClassComponent (bundle.js:27155)
at beginWork (bundle.js:27534)
at performUnitOfWork (bundle.js:29502)
at workLoop (bundle.js:29611)
at HTMLUnknownElement.callCallback*
renderPost函数
renderPosts() {
return this.props.mobile.map(single => {
return <div key={single.postId} className={"container"}><Link to={"/"+single.postSlug} slug={single.postSlug}>
<div class="card" >
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src={single.featuredImage.sizes.medium.file)}/>
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">{single.postTitle}</span>
</div>
</div>
</Link>
</div> ;
});
}