React-Redux渲染刷新崩溃

Question

我有一个带有Redux的Mern应用程序。我有个问题。配置文件组件在两种情况下崩溃。1)在build版本中刷新页面后。2)直接从地址栏进行Proiles路由。(缩小大小的较短代码)

1)Profiles.js组件通过getProfiles操作方法渲染来自redux状态的所有配置文件。

 return (
    <Fragment>
      {loading ? (
        <Spinner />
      ) : (
        <Fragment>
          <h1 className="large text-primary">Profiles</h1>
          <p className="lead">Üyeleri ve grupları keşfedin</p>
          <div className="form">
            <div className="form-group">
              <input
                type="text"
                placeholder="İsim"
                name="company"
                value={company}
                onChange={(e) => onChange(e)}
              />{" "}
            </div>{" "}
          </div>
          <div
            className=" lead d-flex align-items-center"
            onClick={() => setOpen(!open)}
          >
          </div>
          <div className="profiles">
            {profiles.length > 0 ? (
              profiles.map(
                (profile) =>
                  profile.user._id !== user._id && (
                    <ProfileItem
                      key={profile._id}
                      followUser={followUser}
                      unFollowUser={unFollowUser}
                      profile={profile}
                      user={user}
                    />
                  )
              )
            ) : (
              <h4>No Profile</h4>
            )}
          </div>
        </Fragment>
      )}
    </Fragment>
  );
};

Profiles.js的Redux操作

export const getProfiles = (
  page,
  start,
  graduation,
  mentorship,
  scholarship,
  representative,
  company
) => async (dispatch) => {
   const limit = 10;
  const payload = {
    params: {
      page,
      start,
      limit,
      graduation,
      mentorship,
      scholarship,
      representative,
      company,
    },
  };
  console.log(page);
  console.log(payload);
  try {
    const res = await axios.get("/api/profile", payload);
    console.log(res.data.profiles);
    dispatch({
      type: GET_PROFILES,
      payload: { profiles: res.data.profiles, totalPages: res.data.totalPages },
    });
    console.log(res.data);
  } catch (err) {
    dispatch({
      type: PROFILE_ERROR,
      payload: { msg: err.response.statusText, status: err.response.status },
    });
  }
};

Profiles.js的减速机

  case GET_PROFILES:
  return {
    ...state,
    profiles: payload.profiles,
    totalPage: payload.totalPages,
    loading: false,
  };

当我用React-routers从导航中点击时，它是正常的。但当我刷新或直接从地址栏转到页面时，它在控制台中crashes.And这些错误

Refresh/address bar render crash

页面仅在buid模式下崩溃。在开发模式下很好。我试着改变条件(加载等)，但是什么都没有改变。

任何帮助都将不胜感激。谢谢!

Answer 1

看起来问题不在于个人资料，而在于用户_id。最初，在第一次呈现配置文件组件时，用户为null，因此您得到的错误_id为null。

尝试检查用户是否存在，然后渲染配置文件。就像在Profile.js中

if(!user){
        return null
        }

        return (
    <Fragment> 
    // yor rest code
    </Fragment>

此外，在使用console.log加载页面后，检查配置文件的用户属性是否显示为空。

Answer 2

我不确定，但你可以验证以避免第一个错误，我指的是'_id‘错误：

<div className="profiles">
  { 
    profiles.length > 0 && user ? (
      profiles.map((profile) => {
        if (profile.user && profile.user._id !== user._id) {
          return (
            <ProfileItem
              key={profile._id}
              followUser={followUser}
              unFollowUser={unFollowUser}
              profile={profile}
              user={user}
            />
          );
        }
      })
    ) : (
      <h4>No Profile</h4>
    )
  }
</div>;

statusText错误是因为在profiles.js中的try catch中存在错误，并且当您想要分派PROFILE_ERROR操作时，您试图从err.response.statusText访问statusText，但err.response未定义。