React Redux: невозможно сопоставить массив объектов

Question

как отобразить возвращаемый массив объектов? Когда я нажимаю на кнопку, чтобы принести блоги, я получаю этот ответ

image1 и image 2

Теперь в моем приложении JS,

import React from 'react'; 
 
import Blog from '../components/Blog'; 
 
import Form from '../components/Form'; 
 
import Root from '../components/Root'; 
 
import { Router, Route, IndexRoute, browserHistory} from 'react-router'; 
 
import axios from 'axios'; 
 
import { connect } from 'react-redux'; 
 

 
class App extends React.Component { 
 

 
render(){ 
 

 
return(
 
\t <Router history={browserHistory}> 
 
\t <Route path={'/'} component={Root}> 
 
\t \t <IndexRoute component={() => (<Blog blog_posts={this.props.posts} fetchBlogs={this.props.fetchBlogs} />) } ></IndexRoute> 
 
\t \t <Route path={'/form'} component={Form}></Route> 
 
\t </Route> 
 
\t </Router> 
 
); 
 
} 
 
} 
 

 
const mapStateToProps = (state) => { 
 
\t return { 
 
\t \t posts: state.blogs 
 
\t }; 
 
}; 
 

 
const mapDispatchToProps = (dispatch) => { 
 
return { 
 
\t fetchBlogs :() => { 
 
\t dispatch(
 
\t { type: "FETCHING_BLOG" }, 
 
\t axios.get("https://jsonplaceholder.typicode.com/posts") 
 
\t .then((response) => { 
 
\t \t dispatch({ 
 
\t \t \t type: "FETCHING_SUCCESS", 
 
\t \t \t payload: response.data 
 
\t \t }) 
 
\t }) 
 
\t .catch((err) => { 
 
\t \t dispatch({ 
 
\t \t \t type: "FETCHING_ERROR", 
 
\t \t \t payload: err 
 
\t \t }) 
 
\t }) 
 
\t); 
 
\t } 
 
}; 
 
}; 
 

 
export default connect(mapStateToProps, mapDispatchToProps)(App);

Я передаю posts от mapStateToProps (который содержит данные ответа) через реквизиты в компонент блога в IndexRoute.

в моем блоге Компонент, iam протоколирует пройденный реквизит (как видно на изображении выше), и он передается отлично. Теперь это blog_posts .. теперь я сопоставляю blog_posts и не работает и возвращает ncaught TypeError: Cannot read property 'map' of undefined. Пожалуйста, объясните, почему это не работает. Может быть, blog_post должен содержать другой массив, который должен храниться там? Просьба объяснить, что им делать неправильно

Мой блог компонент:

import React from 'react'; 
 

 
class Blog extends React.Component { 
 
render(){ 
 
\t console.log("Passed", this.props); 
 
\t 
 
\t let b = this.props.blog_posts.map(item => { 
 
\t \t console.log(item) 
 
\t }); 
 
\t 
 
\t return(
 
\t <div> 
 
\t \t <button onClick={() => this.props.fetchBlogs()}>Fetch Users!</button> 
 
\t </div> 
 
\t); 
 
} 
 
} 
 

 
export default Blog;

редуктор:

const initBlogState = { 
 
\t fetching: false, 
 
\t fetched: true, 
 
\t blogs: [], 
 
\t error: null 
 
}; 
 

 
export default function blogReducer (state = initBlogState, action) { 
 
\t switch(action.type) 
 
\t { 
 
\t \t case "FETCHING_BLOG": 
 
\t \t \t state = { 
 
\t \t \t \t ...state, 
 
\t \t \t \t fetching: true 
 
\t \t \t }; 
 
\t \t \t break; 
 
\t \t case "FETCHING_SUCCESS": 
 
\t \t \t state = { 
 
\t \t \t \t ...state, 
 
\t \t \t \t fetched: true, 
 
\t \t \t \t blogs: action.payload 
 
\t \t \t }; 
 
\t \t \t break; 
 
\t \t case "FETCHING_ERROR": 
 
\t \t \t state = { 
 
\t \t \t \t ...state, 
 
\t \t \t \t fetched: false, 
 
\t \t \t \t error: action.payload 
 
\t \t \t }; 
 
\t \t \t break; 
 
\t \t default: 
 
\t \t \t break; 
 
\t } 
 
\t return state; 
 
};

Pr ovider:

import React from 'react'; 
 
import ReactDOM from 'react-dom'; 
 

 
import App from './container/App'; 
 
import { Provider } from 'react-redux'; 
 
import store from './store'; 
 

 
ReactDOM.render(
 
\t <Provider store={store}> 
 
\t \t <App /> 
 
\t </Provider>, document.getElementById('root'));

Магазин:

import { createStore, applyMiddleware } from 'redux'; 
 
import logger from 'redux-logger'; 
 
import blogReducer from './reducers/blogReducer'; 
 
import thunk from 'redux-thunk'; 
 

 
const store = createStore(
 
\t blogReducer, 
 
\t {}, 
 
\t applyMiddleware(thunk, logger()) 
 
); 
 

 
export default store;

Answer 1

Хорошо, поэтому Ive решила мою проблему. функция карты уже запускает (даже запрос axios еще не завершен, возвращая данные), когда я нажал кнопку fetch user в моем компоненте Blog .. поэтому я создал функцию, которая проверяет состояние fetched в моем исходном состоянии редуктора. используя при этом код

if (this.props.fetched === true) 
    { 
     console.log("passed: ", this.props); 
     console.log("blogs: ", this.props.blog_post); 

     let b; 
     b = this.props.blog_post.blogs.map(item => { 
      return console.log(item) 
     }); 

    } 

тогда я узнал, что в моем исходном состоянии в моем редукторе, то fetched ошибочно назначен уже в true! поэтому я изменил его в false

Answer 2

Regarging в

Uncaught TypeError: Cannot read property 'map' of undefined 

Вы можете попробовать определить типы поддержки по умолчанию для компонента «Блог».

Blog.defaultProps = { 
    blog_posts: [] 
} 

Но это может не исправить, и это может быть связано с другой ошибкой, которую вы делаете.

Более важно то, что функция карты должна использоваться для возврата преобразованной коллекции той, на которую вызывается .map. Так что в вашем случае, вы не возвращает объект с карты, вы используете (я задаюсь вопросом, как этот код не сообщать об ошибках компиляции, потому что карта должна возвращать значение):

let b = this.props.blog_posts.map(item => { 
    console.log(item) 
}); 

Если вы просто хотите итерации через коллекцию, используйте .forEach insted .map, и если ваше намерение использовать.карту, чтобы преобразовать коллекцию в новую коллекцию, тогда ваша функция должна вернуть значение, а не только console.log. Он должен выглядеть следующим образом:

let b = this.props.blog_posts.map(item => { 
    console.log(item); 
    return item; // you can transform the item here however you like 
}); 

Хотя я думаю, что нет никакой необходимости console.log ничего внутри .map итерации.

Answer 3

Вы используете axios для отправки запроса ajax, поэтому, когда вы звонили map на blog_posts, данные еще не были возвращены. Использовать redux-prom: https://github.com/acdlite/redux-promise