Javascript 在TypeError:无法读取属性'；地图'；指未定义但具有所有支柱的控制台

由于我是react新手，我正在尝试使用react的redux制作一个简单的博客应用程序，但我在获取博客时遇到了问题。它给出了错误类型错误：无法读取未定义的属性的属性“map”。这是我的代码，请帮助我，我被困在这里

操作/index.js

export const FETCH_POSTS = 'fetch_posts';
export function fetchPosts() {
  const request = axios.get(`${ROOT_URL}/posts${API_KEY}`);

  return {
    type: FETCH_POSTS,
    payload: request
  };
}

import { FETCH_POSTS } from '../action';
export default function (state = {post:[]}, action) {
  switch (action.type) {
  case FETCH_POSTS:
      return {
          ...state,
          post: action.payload,
      }
    default:
      return state;
  }
 }

import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';
import PostsReducer from './reducer_posts';

const rootReducer = combineReducers({
  posts: PostsReducer,
  form: formReducer
});

export default rootReducer;

class PostsIndex extends Component {
  componentDidMount() {
      this.props.fetchPosts();
  }
 render() {
      const post1=this.props
      console.log(post1)    //getting data in console
    const map_post= this.post1.map(post => <li key={post.id}>{post.title}</li>)
    console.log(this.props.posts);   // getting data here as well
    return(
      <div>
       <ul className="list-group">
      {map_post} 
        </ul>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return { posts: state.posts ,
            post1:state.posts.posts
     };
}

export default connect(mapStateToProps, { fetchPosts })(PostsIndex);

const createStoreWithMiddleware = applyMiddleware(promise)(createStore);
function App() {
  return (
    <Provider store={createStoreWithMiddleware(reducers)}>
    <BrowserRouter>
    <div className="App">
    <Switch>
          <Route path="/posts/new" component={PostsNew} />
          <Route path="/posts/:id" component={PostsShow} />
          <Route path="/" component={PostsIndex} />
        </Switch>
    </div>
    </BrowserRouter>
</Provider>
  );
}

reducers/reducer\u posts.js

export const FETCH_POSTS = 'fetch_posts';
export function fetchPosts() {
  const request = axios.get(`${ROOT_URL}/posts${API_KEY}`);

  return {
    type: FETCH_POSTS,
    payload: request
  };
}

import { FETCH_POSTS } from '../action';
export default function (state = {post:[]}, action) {
  switch (action.type) {
  case FETCH_POSTS:
      return {
          ...state,
          post: action.payload,
      }
    default:
      return state;
  }
 }

import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';
import PostsReducer from './reducer_posts';

const rootReducer = combineReducers({
  posts: PostsReducer,
  form: formReducer
});

export default rootReducer;

class PostsIndex extends Component {
  componentDidMount() {
      this.props.fetchPosts();
  }
 render() {
      const post1=this.props
      console.log(post1)    //getting data in console
    const map_post= this.post1.map(post => <li key={post.id}>{post.title}</li>)
    console.log(this.props.posts);   // getting data here as well
    return(
      <div>
       <ul className="list-group">
      {map_post} 
        </ul>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return { posts: state.posts ,
            post1:state.posts.posts
     };
}

export default connect(mapStateToProps, { fetchPosts })(PostsIndex);

const createStoreWithMiddleware = applyMiddleware(promise)(createStore);
function App() {
  return (
    <Provider store={createStoreWithMiddleware(reducers)}>
    <BrowserRouter>
    <div className="App">
    <Switch>
          <Route path="/posts/new" component={PostsNew} />
          <Route path="/posts/:id" component={PostsShow} />
          <Route path="/" component={PostsIndex} />
        </Switch>
    </div>
    </BrowserRouter>
</Provider>
  );
}

减速机/index.js

export const FETCH_POSTS = 'fetch_posts';
export function fetchPosts() {
  const request = axios.get(`${ROOT_URL}/posts${API_KEY}`);

  return {
    type: FETCH_POSTS,
    payload: request
  };
}

import { FETCH_POSTS } from '../action';
export default function (state = {post:[]}, action) {
  switch (action.type) {
  case FETCH_POSTS:
      return {
          ...state,
          post: action.payload,
      }
    default:
      return state;
  }
 }

import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';
import PostsReducer from './reducer_posts';

const rootReducer = combineReducers({
  posts: PostsReducer,
  form: formReducer
});

export default rootReducer;

class PostsIndex extends Component {
  componentDidMount() {
      this.props.fetchPosts();
  }
 render() {
      const post1=this.props
      console.log(post1)    //getting data in console
    const map_post= this.post1.map(post => <li key={post.id}>{post.title}</li>)
    console.log(this.props.posts);   // getting data here as well
    return(
      <div>
       <ul className="list-group">
      {map_post} 
        </ul>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return { posts: state.posts ,
            post1:state.posts.posts
     };
}

export default connect(mapStateToProps, { fetchPosts })(PostsIndex);

const createStoreWithMiddleware = applyMiddleware(promise)(createStore);
function App() {
  return (
    <Provider store={createStoreWithMiddleware(reducers)}>
    <BrowserRouter>
    <div className="App">
    <Switch>
          <Route path="/posts/new" component={PostsNew} />
          <Route path="/posts/:id" component={PostsShow} />
          <Route path="/" component={PostsIndex} />
        </Switch>
    </div>
    </BrowserRouter>
</Provider>
  );
}

component/posts_index.js

export const FETCH_POSTS = 'fetch_posts';
export function fetchPosts() {
  const request = axios.get(`${ROOT_URL}/posts${API_KEY}`);

  return {
    type: FETCH_POSTS,
    payload: request
  };
}

import { FETCH_POSTS } from '../action';
export default function (state = {post:[]}, action) {
  switch (action.type) {
  case FETCH_POSTS:
      return {
          ...state,
          post: action.payload,
      }
    default:
      return state;
  }
 }

import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';
import PostsReducer from './reducer_posts';

const rootReducer = combineReducers({
  posts: PostsReducer,
  form: formReducer
});

export default rootReducer;

class PostsIndex extends Component {
  componentDidMount() {
      this.props.fetchPosts();
  }
 render() {
      const post1=this.props
      console.log(post1)    //getting data in console
    const map_post= this.post1.map(post => <li key={post.id}>{post.title}</li>)
    console.log(this.props.posts);   // getting data here as well
    return(
      <div>
       <ul className="list-group">
      {map_post} 
        </ul>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return { posts: state.posts ,
            post1:state.posts.posts
     };
}

export default connect(mapStateToProps, { fetchPosts })(PostsIndex);

const createStoreWithMiddleware = applyMiddleware(promise)(createStore);
function App() {
  return (
    <Provider store={createStoreWithMiddleware(reducers)}>
    <BrowserRouter>
    <div className="App">
    <Switch>
          <Route path="/posts/new" component={PostsNew} />
          <Route path="/posts/:id" component={PostsShow} />
          <Route path="/" component={PostsIndex} />
        </Switch>
    </div>
    </BrowserRouter>
</Provider>
  );
}

类PostsIndex扩展组件{
componentDidMount（）{
this.props.fetchPosts（）；
}
render（）{
const post1=this.props
console.log（post1）//在控制台中获取数据
const map_post=this.post1.map（post=>
{post.title}
）
console.log（this.props.posts）；//也在这里获取数据
返回(

{map_post}

);
}
}
函数MapStateTops（状态）{
返回{posts:state.posts，
post1：state.posts.posts
};
}
导出默认连接（mapStateToProps，{fetchPosts}）（PostsIndex）；

src/App.js

export const FETCH_POSTS = 'fetch_posts';
export function fetchPosts() {
  const request = axios.get(`${ROOT_URL}/posts${API_KEY}`);

  return {
    type: FETCH_POSTS,
    payload: request
  };
}

import { FETCH_POSTS } from '../action';
export default function (state = {post:[]}, action) {
  switch (action.type) {
  case FETCH_POSTS:
      return {
          ...state,
          post: action.payload,
      }
    default:
      return state;
  }
 }

import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';
import PostsReducer from './reducer_posts';

const rootReducer = combineReducers({
  posts: PostsReducer,
  form: formReducer
});

export default rootReducer;

class PostsIndex extends Component {
  componentDidMount() {
      this.props.fetchPosts();
  }
 render() {
      const post1=this.props
      console.log(post1)    //getting data in console
    const map_post= this.post1.map(post => <li key={post.id}>{post.title}</li>)
    console.log(this.props.posts);   // getting data here as well
    return(
      <div>
       <ul className="list-group">
      {map_post} 
        </ul>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return { posts: state.posts ,
            post1:state.posts.posts
     };
}

export default connect(mapStateToProps, { fetchPosts })(PostsIndex);

const createStoreWithMiddleware = applyMiddleware(promise)(createStore);
function App() {
  return (
    <Provider store={createStoreWithMiddleware(reducers)}>
    <BrowserRouter>
    <div className="App">
    <Switch>
          <Route path="/posts/new" component={PostsNew} />
          <Route path="/posts/:id" component={PostsShow} />
          <Route path="/" component={PostsIndex} />
        </Switch>
    </div>
    </BrowserRouter>
</Provider>
  );
}

const createStoreWithMiddleware=applyMiddleware（promise）（createStore）；
函数App（）{
返回(
);
}

此外，当我通过评论文章来登录时，我在控制台中获得了所有帖子

const map_post= post1.map(post => <li key={post.id}>{post.title}</li>)

const-map\u-post=post1.map（post=>{post.title}）

但是我无法在我的组件中渲染它。我得到了错误× TypeError:无法读取未定义的属性“映射”

---

提前感谢

尝试更改您的方法

 componentDidMount() {
      this.props.fetchPosts();
  }

而不是

 componentDidMount() {
      this.props.dispatch(fetchPosts());
  }

同样在render方法中，将this.post添加到

 const mappedTweets = this.post1 && this.post1.map(post => <li key={post.id}>{post.title}</li>);

constmappedteets=this.post1&&this.post1.map（post=>
{post.title}
）；

我认为这是因为在你的reducer上你返回了整个请求，你是否尝试过在reducer上取回案例返回而不是

action.payload

return

action.payload.data

？这是包含POST数组的对象键，我认为您返回的是整个请求。仍然是相同的错误nothing changedOk，所以第二个问题是，如果在渲染之后，我会设置一个条件，询问post1是否未定义，如果没有渲染您放置的代码，则返回null。这是因为当你渲染的时候你还没有得到响应，所以你需要等到响应成功，我已经更新了代码并像这样写了----const-mappedteets=this.post1&&this.post1.map（post=>{post.title}）；虽然错误已消失，但页面上的输出为空白，但我已经更改了componentDidMount并更新了问题。此外，在添加this.post1.map之后，它的给定错误无法读取未定义的属性“map”