Блог

Я работаю над изоморфным приложением react с использованием redux и получаю ошибку promise, даже если этот точно такой же код работает с предыдущими модулями.

Здесь я извлекаю данные с помощью действия fetchMobile и с помощью этого я обновляю данные хранилища.

И функцию loaddata, используемую для запуска dunction на сервере.

 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> ;

  });
  }