React+Redux获取数据后渲染页面出现类型错误的解决方法

问题描述 #

使用React和Redux开发UsersProfile组件时，在useEffect中dispatch获取用户数据，通过useSelector获取state中的loading和data，遇到两个问题：

1. 页面渲染时抛出「Uncaught TypeError: Cannot read properties of undefined (reading 'name')」错误
2. dispatch后无法在渲染前获取数据，导致页面空白

组件代码 #

const UsersProfile = () => {
  const { id } = useParams();
  const dispatch = useDispatch();
  const { loading, data } = useSelector((state) => state.searchedUser);

  console.log(data);
  useEffect(() => {
    dispatch(searchedUser(id));
  }, [dispatch, id]);

  return (
    <>
      {loading ? (
        <Loading />
      ) : (
        <div
          className="flex flex-col h-screen w-full bg-gray-100 overflow-x-hidden overflow-y-auto bg-cover bg-center"
          style={{
            backgroundImage: `url(/img/bg3.jpg)`,
          }}
        >
          <Navbar />
          <div
            className=" px-8  w-full flex items-center justify-center backdrop-blur-lg h-full
         "
          >
            <div className="bg-white w-4/5 h-4/5 m-0 py-8 flex flex-col items-center rounded-2xl md:p-8 md:m-8 shadow-md">
              <h1 className="text-3xl mt-2 font-bold">{data.name}'s Profile</h1>
              <div className=" w-full mt-4 h-full  p-10 flex justify-center items-center">
                <div className="flex flex-col w-full ">
                  <div className=" flex flex-col w-full justify-center ">
                    <h1 className="font-bold text-xl">Name</h1>
                    <p>{}</p>
                  </div>
                  <div className="mt-7 flex flex-col w-full justify-center ">
                    <h1 className="font-bold text-xl">Username</h1>
                    <p>{}</p>
                  </div>
                  <div className="mt-7 flex flex-col w-full justify-center ">
                    <h1 className="font-bold text-xl">Email</h1>
                    <p> {}</p>
                  </div>
                </div>
                <div className="flex flex-col w-full  items-center h-full">
                  <div className="w-3/4 h-3/4 flex items-center justify-center">
                    <img
                      className="w-3/4 h-52 rounded-full border-4 border-black"
                      src="https://images3.alphacoders.com/823/thumb-1920-82317.jpg"
                      alt="#"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}
    </>
  );
};

export default UsersProfile;

错误栈 #

UsersProfile.js:35 Uncaught TypeError: Cannot read properties of undefined (reading 'name')
    at UsersProfile (UsersProfile.js:35:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)

解决方案 #

问题根源 #

1. Redux初始状态中searchedUser.data未设置默认值（如null或空对象），导致组件首次渲染时data为undefined
2. 仅通过loading判断是否渲染内容，但请求完成后loading变为false时，data可能仍未正确赋值或请求失败返回空，直接访问data.name触发报错

具体修改步骤 #

1. 修正Redux初始状态
   在对应的reducer中，为searchedUser设置合理的初始值，确保data有默认值：

   const initialState = {
     loading: false,
     data: null, // 或空对象{}
     error: null
   };
   

2. 组件中增加空值判断
   修改渲染逻辑，在loading为false后，先检查data是否存在，再渲染用户信息，避免访问undefined属性：

   return (
     <>
       {loading ? (
         <Loading />
       ) : data ? (
         <div
           className="flex flex-col h-screen w-full bg-gray-100 overflow-x-hidden overflow-y-auto bg-cover bg-center"
           style={{ backgroundImage: `url(/img/bg3.jpg)` }}
         >
           <Navbar />
           <div className="px-8 w-full flex items-center justify-center backdrop-blur-lg h-full">
             <div className="bg-white w-4/5 h-4/5 m-0 py-8 flex flex-col items-center rounded-2xl md:p-8 md:m-8 shadow-md">
               <h1 className="text-3xl mt-2 font-bold">{data.name}'s Profile</h1>
               {/* 其余用户信息渲染代码 */}
             </div>
           </div>
         </div>
       ) : (
         <div className="flex items-center justify-center h-screen">
           <p>未找到该用户信息</p>
         </div>
       )}
     </>
   );
   

3. 完善异步Action逻辑
   确保异步请求的状态管理正确：

   • 请求开始时：设置loading: true，重置error
   • 请求成功时：设置loading: false，赋值data为返回的用户数据
   • 请求失败时：设置loading: false，赋值error并清空data

4. 可选：使用可选链做安全访问
   为了进一步避免报错，可以在访问data属性时使用可选链操作符?.，例如：

   <h1 className="text-3xl mt-2 font-bold">{data?.name}'s Profile</h1>
   

内容的提问来源于stack exchange，提问作者Harsh Gupta