javascript - 为什么组件收到数据后不更新？ ReactJS

Question

我有一个组件，我尝试在我的博客应用程序中显示单个帖子。当我来自索引页面时，一切正常。但是当我输入帖子的网址并直接转到该路径(例如 /posts/2357)时，出现了问题。在我的代码检查器中，在“网络”选项卡上，我可以看到这篇文章的数据，但由于某种原因，组件没有更新，用户只能看到无尽的“正在加载...”组件。

我的组件:

class PostsShow extends Component {
    componentDidMount() {
        if (!this.props.post) {
            const { id } = this.props.match.params;
            this.props.fetchPost(id);
        }
    }

    render() {
        const { post } = this.props;
    // Check if we already have a post
        if (!post) {
            return <Loader />;
        }

        return (
            <div>
                <div className="row m-t-2">
                    <h3>{post.title}</h3>
                    <span className="m-b-2 label label-info">{post.categories}</span>
                    <p>{post.content}</p>
                </div>
            </div>
        );
     }
}

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

export default connect(mapStateToProps, { fetchPost })(PostsShow);

行动:

export function fetchPost(id) {
    const request = axios.get(`${ROOT_URL}/posts/${id}${API_KEY}`);

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

reducer :

export default function(state = {}, action) {
    switch (action.type) {
    case FETCH_POST:
        return { ...state, [action.payload.data]: action.payload.data  };
    default:
        return state;
    }
}

Answer 1

您的 reducer 似乎有问题。您将状态的对象键设置为[action.payload.data]，并将该对象的值设置为[action.payload.data]。您不应该将键值设置为[action.payload.data.id]吗？