首页 > 解决方案 > 未捕获(承诺中)类型错误:无法读取未定义的属性“文件”

问题描述

我正在使用 redux 开发一个 Isomorphic 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> ;

  });
  }

标签: reactjsreduxserver-side-renderingisomorphic-javascript

解决方案


推荐阅读