Question

我是react-redux的新手，我认为状态管理有问题。我想从主页上的主表中获取帖子详细信息，以在详细信息页面中显示帖子详细信息...当我单击按钮详细信息时，我更改路径“ / details / 1，并且我想显示id为= 1的帖子详细信息我得到{post：undefined，getDetails：ƒ}

action.js

export const postDetails = (data, id) => ({
        type: "POST_DETAILS",
        post: data,
        id: id
})

reducer.js

case "POST_DETAILS":
    return state.posts.map((post) => {
        if(post.id === action.id) {
            return {
                ...post,
                post: post
            }
        } 
    })

容器-GetDetails.js

const mapStateToProps = state => ({ post: state.post });

const mapDispatchToProps = dispatch => {
    return {
        getDetails: (data, id) => dispatch(postDetails(data, id))
    };
};


const GetDetails = connect(
    mapStateToProps,
    mapDispatchToProps
)(Details)


export default GetDetails;

component-Details.js

class Details extends React.Component {
    constructor(props){
        super(props);
    }

    componentDidMount() {
        this.props.getDetails(this.props.post, this.props.id);
    }

    render() {
        return (
            <div>
                Details page
                <ul>
                    <li>
                        {this.props.post}
                    </li>
                </ul>
            </div>
        )
    }
}

export default Details;

Answer 1

您的reducer正在抽取自己的状态，直到状态变得不确定。您从一个对象的状态开始，但是仅返回该对象的一个字段。

从这样的状态开始：

{
  loading: false,
  posts: [
    {
      id: 1
      post: 'foo',
      author: 'bar'
    },
    {
      id: 2
      post: 'fooz',
      author: 'barz'
    }
  ]
}

调度这样的动作：

{
  type: "POST_DETAILS",
  id: 1,
  post: 'this is never accessed'
}

将产生一个数组

[
  {
    id: 1
    post: {
      id: 1
      post: 'foo',
      author: 'bar'
    },
    author: 'bar'
  },
  undefined
]

再次分派操作将导致状态为undefined。

第三次将导致错误。

在减速器中，您可能打算做这样的事情。

case "POST_DETAILS":
    return { ...state, posts: state.posts.map((post) => {
          if(post.id === action.id) {
              return {
                  ...post,
                  post: action.post
              }
          } else {
              return post
          }
      })
    }

react-redux中的CRUD，显示其他页面上的帖子详细信息

1 个答案: