我无法获取 Redux 状态更改为 Rerender 组件的状态值是一样的答案

【问题标题】：I cant get Redux state Change to Rerender component if the state value is the same我无法获取 Redux 状态更改为 Rerender 组件的状态值是一样的
【发布时间】：2021-04-15 08:17:25
【问题描述】：

所以我遇到了一个无法解决的问题，我在用：反应还原商店和 nodejs 后端

我有一个模态组件，它打开并允许用户更改用户头像，而且我有一个应该显示当前用户头像的父组件

在模式打开并且用户选择他们想要的文件后，该文件通过 Axios 发布请求发送到服务器，服务器总是重写以前的头像，所以如果我想访问头像，链接总是相同的，我去这个 URL： http://localhost:3001/users/${action._id}/avatar

我最初认为我可以将图像 src 中的 URL 用于父元素，但是当头像更改时，父组件没有重新呈现，因此静态 URL 不是一个好的选择

所以我决定在我的 redux 存储中存储一个名为 avatar 的新变量，并将静态 URL 存储在存储中，将 store.user.avatar 作为我的图像的 src，并且每次我发出 Axios 发布请求时，我也会将存储值设置为相同的静态字符串 URL，但由于字符串的值没有改变并且相同，因此不会导致重新渲染

所以我认为 javascript 对象永远不会被认为是平等的 {url:1} != {url:1} 也许如果将 URL 存储在一个对象中，它的评估结果会不一样并导致重新渲染，但它不起作用！！

this is my redux store 我正在使用 mapStateToProps 并将图像的值设置为状态中 URL 的值：

        const mapStateToProps = (state) => {
      return {
        userAvatar: state.user.avatar.url,
      };
    };
    
    export default connect(mapStateToProps)(Header);

这些是我在上传点击时调度的操作：

    export const setUserAvatar = (avatar) => ({
      type: "SET_USER_AVATAR",
      avatar,
    });
    
    export const startSetUserAvatar = (file, userAvatarURLForStateChange) => (
      dispatch
    ) => {
      let formData = new FormData();
      formData.append("avatar", file);
      return axios({
        url: "/users/me/avatar",
        method: "POST",
        data: formData,
      })
        .then((res) => {
          dispatch(setUserAvatar(userAvatarURLForStateChange));
          return res.status;
        })
        .catch((err) => {
          console.log("avatar upload action error :", err);
          return err;
        });
    };

这是我的减速器：

    case "SET_USER_AVATAR":
      return {
        ...state,
        avatar: { ...action.avatar },
      };

所以 10 小时后我需要你的慷慨帮助

【问题讨论】：

标签： javascript reactjs redux react-redux

【解决方案1】：

好吧，经过无数次挣扎，我意识到我做错了什么 reactjs 不会在一天结束时检查 reRender 的状态更改，它只关心 virtualDOM，因此如果状态更改但值没有更改，则意味着 virtualDom 完全相同并且不会重新渲染，

所以在我的情况下，即使将状态头像设置为包含 URL 的对象也不会更改 img src 属性，从而导致 NOT RENDERING

为了解决这个问题，discord 频道上的某个人建议在 URL 的末尾添加一个查询字符串，例如，每次我想要重新渲染并想要发送这里的操作是我如何编辑我的减速器来解决这个问题：

case "SET_CURRENT_USER":
      return {
        name: action.name,
        lastname: action.lastname,
        number: action.number,
        email: action.email,
        isAuth: true,
        id: action._id,
        avatar: `http://localhost:3001/users/${
          action._id
        }/avatar/?${moment().valueOf()}`,
      };

【讨论】：