Javascript 使用react/redux点击刷新时不再显示Post

我正在使用react/redux/mongo/express/nodejs（stack），以防信息有所帮助。问题是当我点击“刷新”时，我的帖子似乎消失了。用户可以点击帖子列表中的帖子，它会很好地显示帖子，但当我点击刷新时，帖子不再显示。我将在下面发布代码以提供帮助

编辑：下面是服务器端代码，显示我在后端调用的内容

这位于router.js页面上：

app.get('/posts/:id', Posts.getOnePost);

---

这位于post控制器页面上：

exports.getOnePost = function(req, res, next) {
  Posts.findById(req.params.id).populate("comments").exec(function(err, foundPost) {
    if(err) {
      return next(err);
    } else {
      res.json(foundPost);
    }
  });
}

---

---

现在还不清楚这个帖子的id来自哪里。若它是react应用程序状态的一部分，那个么当你们点击refresh时，它就会消失。刷新时，javascript将从服务器下载，并从干净状态重新启动

若id是路由的一部分，那个么您的组件将有机会恢复它

---

在MapStateTrops中，您声明post是通过索引从状态的post部分提取的内容。刷新后，此POST部分状态可能为空。

id是路由的一部分。路由看起来像localhost:8080/post/：id，当组件装载时，我可以从this.props.match.params.id中传递id的getOnePost（）。刷新不会使componentDidMount（）熄灭吗？刷新会完全清除您的状态，并从开始开始启动脚本。如果需要显示组件，则应调用componentDidMount。您是否尝试添加一些控制台日志以查看调用了什么，以及您在刷新时使用的id是什么？您是否使用一些身份验证来获取帖子？如果是这样，则在刷新时身份验证令牌将丢失，如果在我点击refresh时保持状态，并且如果我在componentDidMount中记录this.props.match.params.id，我将获得正确post的id，但是如果我记录this.props.post，则在刷新后它是未定义的。我将在编辑中添加服务器端代码，以向您显示我正在呼叫的对象。刷新后，状态的一部分可能为空，这就是您获得此信息的原因。props.post是否可以添加代码？

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import * as actions from '../../actions/posts_actions';
import _ from 'lodash';

class ShowPosts extends Component {
  constructor(props) {
    super(props);

    this.onDeleteClick = this.onDeleteClick.bind(this);
    this.deleteComment = this.deleteComment.bind(this);
  }

  componentDidMount() {
    const {id} = this.props.match.params;
    this.props.getOnePost(id);
  }

  renderComments() {
    const { post } = this.props;

    return post.comments.map((comment) => {
      return (
        <li className="list-group-item" key={comment._id}>
          {comment.text}
          <button
            onClick={this.deleteComment, comment.id}
            className="btn btn-xs btn-danger">
            Delete
          </button>
          <Link
            to={`/posts/${post.id}/comments/${comment.id}/edit`}
            className="btn btn-xs btn-warning">
            Edit
          </Link>
        </li>
      );
    });
  }

  deleteComment(comment_id) {
    const {id} = this.props.match.params;
    this.props.deleteComments(id, comment_id, () => {
      this.props.history.push(`/posts/${id}`);
    });
  }

  onDeleteClick() {
    const {id} = this.props.match.params;
    this.props.deletePost(id, () => {
      this.props.history.push("/");
    });
  }

  render() {
    const { post } = this.props;

    if (!post) {
      return <div> Loading...No Post </div>;
    }

    return (
      <div>
        <Link className="btn btn-primary" to="/posts">Back To Post</Link>
        <button
          className="btn btn-danger pull-xs-right"
          onClick={this.onDeleteClick}
        >
          Delete Post
        </button>
        <Link
          className="btn btn-success pull-right"
          to={`/posts/${post.id}/edit`}>
            Edit Post
        </Link>
        <h3>{post.title}</h3>
        <p>{post.content}</p>
        <ul className="list-group">
          {this.renderComments()}
        </ul>
        <Link
          className="btn btn-warning btn-xs"
          to={`/posts/${post.id}/comments/new`}>
            Comment
        </Link>
      </div>
    );
  }
}

function mapStateToProps({ posts }, ownProps) {
  return { post: posts[ownProps.match.params.id] };
}

export default connect(mapStateToProps, actions)(ShowPosts);

export function getOnePost(id) {
  return function(dispatch) {
    axios.get(`${ROOT_URL}/posts/${id}`)
      .then((response) => {
        dispatch({
          type: GET_POST,
          payload: response
        });
      })
      .catch((error) => {
        console.log(error);
      });
  }
}