Javascript redux状态的更改不会导致组件的更改/componentDidUpdate未调用

我有一个post details组件，单击like按钮，redux状态会改变，redux状态如下

职位 ->postDetails

我正在更改postDetais对象的like属性和like数，单击like按钮，like属性将从false设置为true，反之亦然，like数将增加

但是，状态正在更改，但componentDidUpdate方法未触发

PostDetails.js

import React, { Component } from "react";
import { connect } from "react-redux";
import {
  getPostData,
  likePost,
  unlikePost
} from "../../store/actions/postsActions";
import { Icon, Tooltip } from "antd";
import { Link } from "react-router-dom";

export class PostDetails extends Component {
  state = {
    postData: this.props.postDetails
  };

  componentDidMount() {
    this.props.getPostData(this.props.match.params.post_id);
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log(this.props.postDetails);
    if (prevProps.postDetails !== this.props.postDetails) {
      this.setState({
        postData: this.props.postDetails
      });
    }
  }

  render() {
    const { postData } = this.state;
    const liked = postData.liked;
    return (
      <div className="postDetails">
        {postData && (
          <div className="postDetailsContainer">
            <div className="postImage">
              <img src={postData.imageUrl} alt={postData.caption} />
            </div>
            <div className="postContent">
              <div className="postContent__header">
                <Link
                  to={`/user/${postData.username}`}
                  className="postContent__headerContent"
                >
                  <img
                    src={postData.profileUrl}
                    alt={postData.username}
                    className="postContent__profileImage"
                  />
                  <p className="postContent__username">{postData.username}</p>
                </Link>
              </div>

              <div className="postComments" />
              <div className="postInfo">
                <div className="postActions">
                  {liked ? (
                    <Tooltip title="Unlike post">
                      <Icon
                        type="heart"
                        className="likePost"
                        theme="filled"
                        style={{ color: "#d41c00" }}
                        onClick={() => this.props.unlikePost(postData.id)}
                      />
                    </Tooltip>
                  ) : (
                    <Tooltip title="Like post">
                      <Icon
                        type="heart"
                        className="likePost"
                        onClick={() => this.props.likePost(postData.id)}
                      />
                    </Tooltip>
                  )}
                  <Tooltip title="Comment">
                    <Icon type="message" className="commentButton" />
                  </Tooltip>
                </div>
                <Tooltip title="Refresh comments">
                  <Icon type="reload" className="reloadComments" />
                </Tooltip>
              </div>
              <div />
            </div>
          </div>
        )}
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    postDetails: state.posts.postDetails
  };
};

const mapDispatchToProps = dispatch => {
  return {
    getPostData: postId => dispatch(getPostData(postId)),
    likePost: postId => dispatch(likePost(postId)),
    unlikePost: postId => dispatch(unlikePost(postId))
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(PostDetails);

postsActions.js

import Axios from "axios";
import moment from "moment";
import store from "../store";
export const createPost = postData => {
  return (dispatch, getState) => {
    dispatch({ type: "CREATING_POST" });

    Axios.post("/api/post/new", {
      imageUrl: postData.imageUrl,
      caption: postData.caption
    })
      .then(res => {
        dispatch({ type: "CREATED_POST" });

        dispatch({ type: "ADD_POST", payload: res.data.post });
      })
      .catch(err => {
        console.log(err);
      });
  };
};

export const fetchFeed = () => {
  return (dispatch, getState) => {
    Axios.get("/api/user/feed")
      .then(res => {
        var feed = res.data.feed;
        const state = store.getState();
        const likedPosts = state.user.userData.likedPosts;

        for (var i = 0; i < feed.length; i++) {
          for (var j = 0; j < feed.length - i - 1; j++) {
            if (moment(feed[j + 1].createdAt).isAfter(feed[j].createdAt)) {
              var temp = feed[j];
              feed[j] = feed[j + 1];
              feed[j + 1] = temp;
            }
          }
        }

        for (var i = 0; i < feed.length; i++) {
          if (likedPosts.indexOf(feed[i]._id) > -1) {
            feed[i]["liked"] = true;
          } else {
            feed[i]["liked"] = false;
          }
        }

        console.log(feed);
        dispatch({ type: "FETCH_FEED", payload: feed });
      })
      .catch(err => {
        console.log(err);
      });
  };
};

export const likePost = postId => {
  return (dispatch, getState) => {
    Axios.put("/api/post/like", { postId: postId })
      .then(res => {
        const feed = store.getState().posts.feed;

        feed.forEach(post => {
          if (post._id === postId) {
            post.liked = true;
          }
        });

        dispatch({ type: "UPDATE_FEED", payload: feed });
        dispatch({ type: "LIKED_POST", payload: res.data.postId });
      })
      .catch(err => {
        console.log(err);
      });
  };
};

export const unlikePost = postId => {
  return (dispatch, getState) => {
    Axios.put("/api/post/unlike", { postId: postId })
      .then(res => {
        const feed = store.getState().posts.feed;

        feed.forEach(post => {
          if (post._id === postId) {
            post.liked = false;
          }
        });

        dispatch({ type: "UPDATE_FEED", payload: feed });
        dispatch({ type: "UNLIKED_POST", payload: res.data.postId });
      })
      .catch(err => {
        console.log(err);
      });
  };
};

export const getPostData = postId => {
  return (dispatch, getState) => {
    Axios.get(`/api/post/${postId}`)
      .then(res => {
        const likedPosts = store.getState().user.userData.likedPosts;

        if (likedPosts.indexOf(postId) > -1) {
          res.data.post["liked"] = true;
        } else {
          res.data.post["liked"] = false;
        }

        dispatch({ type: "GET_POST_DATA", payload: res.data.post });
      })
      .catch(err => {
        console.log(err);
      });
  };
};

export const resetFeedUpdated = () => {
  return (dispatch, getState) => {
    dispatch({ type: "RESET_FEED_UPDATED" });
  };
};

export const resetCreatedPost = () => {
  return (dispatch, getState) => {
    dispatch({ type: "RESET_CREATED_POST" });
  };
};

从“Axios”导入Axios；
从“时刻”中导入时刻；
从“./store”导入存储；
export const createPost=postData=>{
返回（调度，获取状态）=>{
分派（{type:“CREATING_POST”}）；
Axios.post（“/api/post/new”{
imageUrl:postData.imageUrl，
标题：postData.caption
})
。然后（res=>{
分派（{type:“CREATED_POST”}）；
分派（{type:“ADD_POST”，payload:res.data.POST}）；
})
.catch（错误=>{
控制台日志（err）；
});
};
};
导出常量fetchFeed=（）=>{
返回（调度，获取状态）=>{
get（“/api/user/feed”）
。然后（res=>{
var feed=res.data.feed；
const state=store.getState（）；
const likedPosts=state.user.userData.likedPosts；
对于（变量i=0；i-1）{
feed[i][“喜欢”]=true；
}否则{
feed[i][“liked”]=false；
}
}
控制台日志（feed）；
分派（{type:“FETCH_FEED”，有效负载：FEED}）；
})
.catch（错误=>{
控制台日志（err）；
});
};
};
导出常量likePost=postId=>{
返回（调度，获取状态）=>{
put（“/api/post/like”，{postId:postId}）
。然后（res=>{
const feed=store.getState（）.posts.feed；
feed.forEach（post=>{
如果（post.\U id==postId）{
post.like=true；
}
});
分派（{type:“UPDATE_FEED”，payload:FEED}）；
分派（{type:“LIKED_POST”，payload:res.data.postId}）；
})
.catch（错误=>{
控制台日志（err）；
});
};
};
export const unlikePost=postId=>{
返回（调度，获取状态）=>{
put（“/api/post/inspect”，{postId:postId}）
。然后（res=>{
const feed=store.getState（）.posts.feed；
feed.forEach（post=>{
如果（post.\U id==postId）{
post.like=false；
}
});
分派（{type:“UPDATE_FEED”，payload:FEED}）；
分派（{type:“UNLIKED_POST”，有效负载：res.data.postId}）；
})
.catch（错误=>{
控制台日志（err）；
});
};
};
export const getPostData=postId=>{
返回（调度，获取状态）=>{
get（`/api/post/${postId}`）
。然后（res=>{
const likedPosts=store.getState（）.user.userData.likedPosts；
如果（如posts.indexOf（posted）>-1）{
res.data.post[“liked”]=true；
}否则{
res.data.post[“liked”]=false；
}
分派（{type:“GET_POST_DATA”，有效负载：res.DATA.POST}）；
})
.catch（错误=>{
控制台日志（err）；
});
};
};
导出常量resetFeedUpdated=（）=>{
返回（调度，获取状态）=>{
分派（{type:“RESET\u FEED\u UPDATED”}）；
};
};
导出常量resetCreatedPost=（）=>{
返回（调度，获取状态）=>{
分派（{type:“RESET\u CREATED\u POST”}）；
};
};

你的

喜欢的帖子

和

不喜欢的帖子

reducer案例不是纯粹的——它们正在变异状态中现有的

postDetails

对象，并将其放回

状态

，因此

connect

在对

postDetails

进行简单的等价比较时，正在优化而不是重新渲染从

组件更新中的上一个和下一个道具。确保您正在为
postDetails
创建一个全新的值，例如：

    case "LIKED_POST":
      const { postDetails } = state;

      const newPostDetails = {
        ...postDetails,
        liked: true,
        likes: postDetails.likes + 1,
      };
      return {
        ...state,
        postDetails: newPostDetails
      };

您应该检查比较
if（prevProps.postDetails！==this.props.postDetails）
是否命中。因为使用like函数只更改同一对象的属性，比较将失败，因为它仍然是
postDetails
的同一对象引用。尝试在减速器中返回新对象：

case "LIKED_POST":
      const { postDetails } = state;

      postDetails.liked = true;
      postDetails.likes += 1;
      return {
        ...state,
        postDetails: {
           ...postDetails
        },
      }

另外，如果您没有更改组件内部但在Redux存储中的对象的任何内容，为什么不直接使用组件属性呢？您可以删除state对象和
组件diddupdate
。您还可以将其重构为功能组件

  render() {
    const { postDetails: postData } = this.props;
    ...
  }

在使用Redux时，永远不要忘记这三个原则


真理的单一来源
国家只准备好了
还原程序必须是纯函数：还原程序接受以前的状态和某些操作，并对其进行修改并返回新状态。我们永远不应该改变国家。我们应该创建新对象并返回它们

您已经改变了reducer函数中的现有状态。这不会触发componentdidupdate，因为connect方法（它检查MapStateTops）认为没有任何更改（它检查引用，并且因为引用没有更改，所以不会调用组件）

您可以使用Object.assign或使用spread运算符，这有助于使减缩器返回新对象

更改喜欢的和未链接的函数以返回新对象，而不是改变现有对象

@azundo添加了实现所需的代码的方式。
使用
componentWillReceiveProps
intead of componentdiddupdate。网址-。它叫夏娃
  render() {
    const { postDetails: postData } = this.props;
    ...
  }