如何使用减缩器在获取数据后呈现页[Uncaught :无法读取未定义属性]

Question

发送后无法在使用useSelector呈现页面之前获取数据，我的屏幕显示为完全空白。我用过反应和还原

代码：

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)

这个问题的解决办法是什么，我无法确定。我刚刚使用了useEffect下的调度，然后尝试使用useSelector获取数据，并在页面上使用这些数据。我认为在呈现页面之前可能会有一些解决方案

Answer 1

您的loading和data在呈现过程中可能不同步。将三元条件更新为

{loading || !data} ? (