Estoy luchando con este problema [HMR] Esperando la señal de actualización de WDS … y en el archivo allPost.js, obtengo esto

«TypeError: this.props.posts.map no es una función»

no puede obtener los datos de Redux. pero tengo otro proyecto de reacción que tiene la misma plantilla de Redux y funciona bien, pero no con este, todavía soy nuevo en React {amp}amp; Redux, así que tengan paciencia si estoy haciendo algo mal aquí, pero supongo que El problema es con Webpack HMR, que está tomando tiempo para guardar o procesar los datos, pero no sé mucho sobre Webpack y cómo configurarlo

Entonces, ¿alguien puede explicarme qué hay de malo en mi código y cómo solucionarlo? Gracias de antemano

App.js

import './App.css'; import React, { Component } from "react"; import { Provider } from "react-redux"; import store from './store/store'; import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; import EditPage from './components/main/edit/edit'; import MainPage from './components/main/main'; class App extends Component { render() { return ( {amp}lt;Provider store={store}{amp}gt; {amp}lt;Router{amp}gt; {amp}lt;div className="App"{amp}gt; {amp}lt;div className="navbar"{amp}gt; {amp}lt;h2 className="center"{amp}gt;REACT{amp}lt;/h2{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;Switch{amp}gt; {amp}lt;Route exact path="/" component={MainPage} /{amp}gt; {amp}lt;Route path="/edit-post" component={EditPage} /{amp}gt; {amp}lt;/Switch{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/Router{amp}gt; {amp}lt;/Provider{amp}gt; ); } } 

Store.js

 import { createStore, applyMiddleware } from 'redux'; import thunk from "redux-thunk"; import rootReducer from '../reducers/rootReducer'; const saveToLocalStorage = (state) ={amp}gt; { try { const serializedState = JSON.stringify(state); localStorage.setItem('savePosts', serializedState); } catch (e) { console.log(e) } } const LoadFromLocalStorage = () ={amp}gt; { try { const serializedState = localStorage.getItem('savePosts'); if(serializedState === null) return undefined return JSON.parse(serializedState) } catch (e) { console.log(e); return undefined } } const persistedState = LoadFromLocalStorage() const store = createStore( rootReducer, persistedState, applyMiddleware(thunk) ) store.subscribe(() ={amp}gt; saveToLocalStorage(store.getState())); export default store; 

rootReducer.Js

 import { combineReducers } from 'redux'; import postReducer from './postReducer'; const rootReducer = combineReducers({ postReducer: postReducer }); export default rootReducer; 

postReducer.js

 const postReducer = (state = [], action) ={amp}gt; { switch (action.type) { case "ADD_POST": return state.concat([action.data]); case "DELETE_POST": return state.filter(post ={amp}gt; post.id !== action.id); case "UPDATE": return state.map(post ={amp}gt; { if (post.id === action.id) { return { ...post, title: action.data.newTitle, author: action.data.newAuthor, message: action.data.newMessage, image: action.data.newImage, editing: !post.editing }; } else return post; }); default: return state; } }; export default postReducer; 

allPost.js

 import React, { Component } from "react"; import { connect } from "react-redux"; import Post from "./single-post/post"; class AllPost extends Component { componentDidMount(){ console.log(this.props.posts) } render() { return ( {amp}lt;div className="post-container"{amp}gt; {!this.props.posts ? {amp}lt;div{amp}gt; {amp}lt;h1 className="no_post_heading"{amp}gt;No Data{amp}lt;/h1{amp}gt; {amp}lt;/div{amp}gt;: this.props.posts.map(post ={amp}gt; ( {amp}lt;div key={post.id}{amp}gt; {amp}lt;Post post={post} key={post.id} /{amp}gt; {amp}lt;/div{amp}gt; ))} {amp}lt;/div{amp}gt; ); } } const mapStateToProps = state ={amp}gt; { return { posts: state }; }; export default connect(mapStateToProps)(AllPost); 
Salman Hilabi

es un nuevo contribuyente a este sitio. Tenga cuidado al pedir aclaraciones, comentarios y respuestas. Mira nuestro

Código de Conducta

.