React组件中如何显示两个解构对象的错误信息

方法1：解构时重命名变量 #

这是最直接的解决方案，在解构两个对象时，给各自的error变量指定不同的别名，从根源上避免命名冲突：

// 解构时为error设置专属别名
const { error: userDetailsError } = userDetails;
const { error: userUpdateProfileError } = userUpdateProfile;

后续渲染错误信息时，直接使用别名区分两类错误即可：

return (
  <div className="error-container">
    {userDetailsError && <p className="text-error">{userDetailsError}</p>}
    {userUpdateProfileError && <p className="text-error">{userUpdateProfileError}</p>}
  </div>
);

方法2：直接通过对象属性访问 #

如果不需要解构其他变量，可以跳过解构步骤，直接通过对象属性调用error，同样能避免冲突：

return (
  <div className="error-container">
    {userDetails.error && <p className="text-error">{userDetails.error}</p>}
    {userUpdateProfile.error && <p className="text-error">{userUpdateProfile.error}</p>}
  </div>
);

方法3：混合解构与属性访问（按需使用） #

如果需要解构对象中的其他变量，同时保留error的区分度，可以采用混合写法：

// 解构需要的其他变量，error保留在对象中
const { username, email } = userDetails;
const { bio, avatarUrl } = userUpdateProfile;

return (
  <div>
    <div className="user-info">
      <p>{username}</p>
      <p>{email}</p>
    </div>
    {userDetails.error && <p className="text-error">{userDetails.error}</p>}
    
    <div className="profile-info">
      <p>{bio}</p>
      <img src={avatarUrl} alt="User avatar" />
    </div>
    {userUpdateProfile.error && <p className="text-error">{userUpdateProfile.error}</p>}
  </div>
);

其中方法1是最推荐的方案，它通过明确的别名让代码可读性更高，后续维护也更清晰。

内容的提问来源于stack exchange，提问作者Dimitris Kougioumtzis