Reactjs Redux未更新initialState

我正在从我的行为中检索帖子，但它没有显示在

console.log(this.props.posts)

但是，它确实显示在操作

控制台.log

相反，我得到了这个

理想情况下，在posts:Array中，它应该显示Array（2），因此redux似乎没有更新initialState

posts

Array，从而无法检索posts。将

action.data.data

更改为

action.data

不会改变任何东西

actions.js

export const GetPosts = () => {
    return (dispatch, getState) => {
        return Axios.get('/api/posts/myPosts')
            .then( (res) => {
                 const data = {
                     data: res.data
                 }
                 console.log(data); // logs data and i can see an array 
                 dispatch({type: GET_POSTS, data })
             })

    }
}

import { POST_FAIL, GET_POSTS, POST_SUCC, DELETE_POST} from '../actions/';

const initialState = {
    post: [],
    postError: null,
    posts:[]
}

export default (state = initialState, action) => {
    switch (action.type) {
        case POST_SUCC:
            return ({
                ...state,
                post:action.post
            });

        case POST_FAIL:
            return({
                ...state,
                postError: action.err.response.data
            })
        case GET_POSTS:
            // console.log(action.data.data)
            return {...state, posts: action.data.data}
        // case DELETE_POST:
        //     return ({
        //         ...state,
        //        posts: action.posts.filter(post => post.id !== action.posts[0].id)
        //     })
        default:
            return state
    }
}

import React, { Component } from 'react';
import PostList from './PostList';
import Axios from '../Axios';
import {connect} from 'react-redux';
import { withRouter, Redirect} from 'react-router-dom';
import {DeletePost, GetPosts} from '../actions/';

const Styles = {
    myPaper:{
      margin: '20px 0px',
      padding:'20px'
    }
    , 
    wrapper:{
      padding:'0px 60px'
    }
}
class Posts extends Component {
    state = {
      posts: [],
      loading: true,
    }

  componentWillMount(){
    this.props.GetPosts();
    // renders an empty posts array
    console.log(this.props.posts);
  }

  onDelete = (id) => {
    Axios.post(`/api/posts/delete/${id}`);
    this.setState({
      posts: this.state.posts.filter(post => post.id !== id)
    })
  }


  render() {
    const {loading, posts} = this.state;
    if (!this.props.isAuthenticated) {
      return (<Redirect to='/signIn' />);
    }
    if(loading){
      return "loading..."
    }
    return (
      <div className="App" style={Styles.wrapper}>
        <h1> Posts </h1>
        {/* <PostList posts={this.props.posts}/> */}
      </div>
    );
  }
}
const mapStateToProps = (state) => ({
  isAuthenticated: state.user.isAuthenticated,
  // i know i have to use state.post.posts but i wanted to get an idea if the 
  // initialize state updated at all
  posts: state.post
})
const mapDispatchToProps = (dispatch, state) => ({
  // newPost: (post) => dispatch(newPost(post)),
  // DeletePost: (id) => dispatch( DeletePost(id))
  GetPosts: () => dispatch( GetPosts())
});
export default withRouter(connect(mapStateToProps,mapDispatchToProps)(Posts));

因此，我更新状态，以便能够在组件中检索它

posts.js

export const GetPosts = () => {
    return (dispatch, getState) => {
        return Axios.get('/api/posts/myPosts')
            .then( (res) => {
                 const data = {
                     data: res.data
                 }
                 console.log(data); // logs data and i can see an array 
                 dispatch({type: GET_POSTS, data })
             })

    }
}

import { POST_FAIL, GET_POSTS, POST_SUCC, DELETE_POST} from '../actions/';

const initialState = {
    post: [],
    postError: null,
    posts:[]
}

export default (state = initialState, action) => {
    switch (action.type) {
        case POST_SUCC:
            return ({
                ...state,
                post:action.post
            });

        case POST_FAIL:
            return({
                ...state,
                postError: action.err.response.data
            })
        case GET_POSTS:
            // console.log(action.data.data)
            return {...state, posts: action.data.data}
        // case DELETE_POST:
        //     return ({
        //         ...state,
        //        posts: action.posts.filter(post => post.id !== action.posts[0].id)
        //     })
        default:
            return state
    }
}

import React, { Component } from 'react';
import PostList from './PostList';
import Axios from '../Axios';
import {connect} from 'react-redux';
import { withRouter, Redirect} from 'react-router-dom';
import {DeletePost, GetPosts} from '../actions/';

const Styles = {
    myPaper:{
      margin: '20px 0px',
      padding:'20px'
    }
    , 
    wrapper:{
      padding:'0px 60px'
    }
}
class Posts extends Component {
    state = {
      posts: [],
      loading: true,
    }

  componentWillMount(){
    this.props.GetPosts();
    // renders an empty posts array
    console.log(this.props.posts);
  }

  onDelete = (id) => {
    Axios.post(`/api/posts/delete/${id}`);
    this.setState({
      posts: this.state.posts.filter(post => post.id !== id)
    })
  }


  render() {
    const {loading, posts} = this.state;
    if (!this.props.isAuthenticated) {
      return (<Redirect to='/signIn' />);
    }
    if(loading){
      return "loading..."
    }
    return (
      <div className="App" style={Styles.wrapper}>
        <h1> Posts </h1>
        {/* <PostList posts={this.props.posts}/> */}
      </div>
    );
  }
}
const mapStateToProps = (state) => ({
  isAuthenticated: state.user.isAuthenticated,
  // i know i have to use state.post.posts but i wanted to get an idea if the 
  // initialize state updated at all
  posts: state.post
})
const mapDispatchToProps = (dispatch, state) => ({
  // newPost: (post) => dispatch(newPost(post)),
  // DeletePost: (id) => dispatch( DeletePost(id))
  GetPosts: () => dispatch( GetPosts())
});
export default withRouter(connect(mapStateToProps,mapDispatchToProps)(Posts));

Posts.js

export const GetPosts = () => {
    return (dispatch, getState) => {
        return Axios.get('/api/posts/myPosts')
            .then( (res) => {
                 const data = {
                     data: res.data
                 }
                 console.log(data); // logs data and i can see an array 
                 dispatch({type: GET_POSTS, data })
             })

    }
}

import { POST_FAIL, GET_POSTS, POST_SUCC, DELETE_POST} from '../actions/';

const initialState = {
    post: [],
    postError: null,
    posts:[]
}

export default (state = initialState, action) => {
    switch (action.type) {
        case POST_SUCC:
            return ({
                ...state,
                post:action.post
            });

        case POST_FAIL:
            return({
                ...state,
                postError: action.err.response.data
            })
        case GET_POSTS:
            // console.log(action.data.data)
            return {...state, posts: action.data.data}
        // case DELETE_POST:
        //     return ({
        //         ...state,
        //        posts: action.posts.filter(post => post.id !== action.posts[0].id)
        //     })
        default:
            return state
    }
}

import React, { Component } from 'react';
import PostList from './PostList';
import Axios from '../Axios';
import {connect} from 'react-redux';
import { withRouter, Redirect} from 'react-router-dom';
import {DeletePost, GetPosts} from '../actions/';

const Styles = {
    myPaper:{
      margin: '20px 0px',
      padding:'20px'
    }
    , 
    wrapper:{
      padding:'0px 60px'
    }
}
class Posts extends Component {
    state = {
      posts: [],
      loading: true,
    }

  componentWillMount(){
    this.props.GetPosts();
    // renders an empty posts array
    console.log(this.props.posts);
  }

  onDelete = (id) => {
    Axios.post(`/api/posts/delete/${id}`);
    this.setState({
      posts: this.state.posts.filter(post => post.id !== id)
    })
  }


  render() {
    const {loading, posts} = this.state;
    if (!this.props.isAuthenticated) {
      return (<Redirect to='/signIn' />);
    }
    if(loading){
      return "loading..."
    }
    return (
      <div className="App" style={Styles.wrapper}>
        <h1> Posts </h1>
        {/* <PostList posts={this.props.posts}/> */}
      </div>
    );
  }
}
const mapStateToProps = (state) => ({
  isAuthenticated: state.user.isAuthenticated,
  // i know i have to use state.post.posts but i wanted to get an idea if the 
  // initialize state updated at all
  posts: state.post
})
const mapDispatchToProps = (dispatch, state) => ({
  // newPost: (post) => dispatch(newPost(post)),
  // DeletePost: (id) => dispatch( DeletePost(id))
  GetPosts: () => dispatch( GetPosts())
});
export default withRouter(connect(mapStateToProps,mapDispatchToProps)(Posts));

import React，{Component}来自'React'；
从“/PostList”导入PostList；
从“../Axios”导入Axios；
从'react redux'导入{connect}；
从“react router dom”导入{withRouter，Redirect}；
从“../actions/”导入{DeletePost，GetPosts}；
常量样式={
我的论文：{
保证金：“20px 0px”，
填充：'20px'
}
, 
包装器：{
填充：“0px 60px”
}
}
类Posts扩展组件{
状态={
员额：[]，
加载：对，
}
组件willmount（）{
this.props.GetPosts（）；
//呈现空的posts数组
console.log（this.props.posts）；
}
onDelete=（id）=>{
post（`/api/posts/delete/${id}`）；
这是我的国家({
posts:this.state.posts.filter（post=>post.id！==id）
})
}
render（）{
const{loading，posts}=this.state；
如果（！this.props.isAuthenticated）{
返回（）；
}
如果（装载）{
返回“正在加载…”
}
返回(
帖子
{/*  */}
);
}
}
常量mapStateToProps=（状态）=>({
isAuthenticated:state.user.isAuthenticated，
//我知道我必须使用state.post.posts，但我想知道
//初始化状态已更新
职位：state.post
})
const mapDispatchToProps=（调度，状态）=>({
//newPost：（post）=>调度（newPost（post）），
//DeletePost：（id）=>调度（DeletePost（id））
GetPosts:（）=>调度（GetPosts（））
});
使用路由器导出默认值（connect（mapStateToProps，mapDispatchToProps）（Posts））；

您的减速机正在设置

posts

状态属性：

case GET_POSTS:
            // console.log(action.data.data)
            return {...state, posts: action.data.data}

const mapStateToProps = (state) => ({
  isAuthenticated: state.user.isAuthenticated,
  // i know i have to use state.post.posts but i wanted to get an idea if the 
  // initialize state updated at all
  posts: state.post
})

组件正在将

post

状态属性映射到组件的

posts

属性：

case GET_POSTS:
            // console.log(action.data.data)
            return {...state, posts: action.data.data}

const mapStateToProps = (state) => ({
  isAuthenticated: state.user.isAuthenticated,
  // i know i have to use state.post.posts but i wanted to get an idea if the 
  // initialize state updated at all
  posts: state.post
})

---

谢谢你的帮助，这真的不能解决问题。我正在尝试在console.log中显示this.props.posts。或者更好的更新状态的方法。我无法用this.state.posts检索它，这是你的意思吗？我解决了问题，我必须认真阅读你写的我的道歉。