在React TypeScript中重新渲染redux状态

Question

侧边栏.tsx

const SideBar = ({ handleMenuColor, menu, setMenu }: any) => {
  const user = useSelector((state: RootState) => state.user);
  const dispatch = useDispatch();

  useEffect(() => {
    const menu = localStorage.getItem("menu");
    console.log(user);
    setMenu(menu);
  });

  const [name, setName] = useState(user.name || "");
  const [email, setEmail] = useState(user.email || "");
  const [number, setNumber] = useState(user.number || "");
  const [instansi, setInstansi] = useState(user.instansi || "");
  const [jurusan, setJurusan] = useState(user.jurusan || "");
  const [angkatan, setAngkatan] = useState(user.angkatan || "");
  const [source, setSource] = useState(user.tauSmartpath || "");
  const [profil, setProfil] = useState(user.image || "");

  useEffect(() => {
    //handle auto-updating
    if (user) {
      setName(user.name || "");
      setEmail(user.email || "");
      setNumber(user.number || "");
      setInstansi(user.instansi || "");
      setJurusan(user.jurusan || "");
      setAngkatan(user.angkatan || "");
      setSource(user.tauSmartpath || "");
      setProfil(user.image || "");
    }
  }, [user]);

  useEffect(() => {
    if (user) {
      setName(user.name || "");
      setEmail(user.email || "");
      setNumber(user.number || "");
      setInstansi(user.instansi || "");
      setJurusan(user.jurusan || "");
      setAngkatan(user.angkatan || "");
      setSource(user.tauSmartpath || "");
    }

    let path = window.location.pathname;
    // ambil nama menu
    path = path.split("/")[2];
    console.log(path == undefined);
    setMenu(path);
  }, [user]);
return(
<div className="flex flex-col items-center justify-center mt-10">
   <h2 className="text-xl font-bold pt-4">{name}</h2>
   <p>{email}</p>
</div>
);};
export default SideBar;

editProfile.tsx

const EditProfile = () => {
  const user = useSelector((state: RootState) => state.user);
  useFetchUserProfile();
 
  // ...

  const dispatch = useDispatch();
  const [name, setName] = useState(user.name || "");
  const [email, setEmail] = useState(user.email || "");
  const [number, setNumber] = useState(user.number || "");
  const [instansi, setInstansi] = useState(user.instansi || "");
  const [jurusan, setJurusan] = useState(user.jurusan || "");
  const [angkatan, setAngkatan] = useState(user.angkatan || "");
  const [source, setSource] = useState(user.tauSmartpath || "");

  useEffect(() => {
    if (user) {
      setName(user.name || "");
      setEmail(user.email || "");
      setNumber(user.number || "");
      setInstansi(user.instansi || "");
      setJurusan(user.jurusan || "");
      setAngkatan(user.angkatan || "");
      setSource(user.tauSmartpath || "");
    }
  }, [user]);

 
  const handleSimpan = async (event: React.FormEvent) => {
    setLoading(true);
    console.log("cok");
    event.preventDefault();
    const userId = localStorage.getItem("user_id");

    if (!userId) {
      console.error("User ID not found");
      setLoading(false);
      return;
    }

    const userData = {
      name: name,
      email: email,
      number: number,
      instansi: instansi,
      jurusan: jurusan,
      angkatan: angkatan,
      tau_smartpath: source,
      image: selectedFile,
    };

    try {
      // form data
      const formData = new FormData();
      formData.append("name", userData.name);
      formData.append("email", userData.email);
      formData.append("number", userData.number);
      formData.append("instansi", userData.instansi);
      formData.append("jurusan", userData.jurusan);
      formData.append("angkatan", userData.angkatan);
      formData.append("tau_smartpath", userData.tau_smartpath);
      if (userData.image) {
        formData.append("image", userData.image);
        console.log(userData.image);
      }

      // Update user data
      const res = await axios.put(`${baseURL}/auth/${user.id}`, formData, {
        headers: {
          "Content-Type": "multipart/form-data",
          Authorization: `Bearer ${localStorage.getItem("token")}`,
        },
      });
      // Fetch updated user data
      // eslint-disable-next-line react-hooks/rules-of-hooks
      console.log(res.data.data);
      dispatch(setUserInfo(res.data.data));
      alert("User data updated successfully!");
    } catch (error) {
      console.error("Error updating user data:", error);
    } finally {
      setLoading(false);
    }
  };

  useFetchUserProfile();
return(
<form className="space-y-12" onSubmit={handleSimpan}>
                {/* Nama Lengkap */}
                <div className="flex flex-col relative">
                  <span className="mb-4 font-bold">Nama Lengkap</span>
                  <input
                    type="text"
                    id="name"
                    name="name"
                    placeholder="Nama lengkap"
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                    className="border rounded-lg px-4 py-4 text-sm pl-10"
                    style={{ borderColor: "#bbb", backgroundColor: "#F9F9F9" }}
                  />
                </div>

                {/* Email */}
                <div className="flex flex-col relative">
                  <span className="mb-4 font-bold">Email</span>
                  <input
                    type="text"
                    id="email"
                    name="email"
                    placeholder="Email"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    className="border rounded-lg px-4 py-4 text-sm pl-10"
                    style={{ borderColor: "#bbb", backgroundColor: "#F9F9F9" }}
                  />
                </div>
);};
export default editProfile;

从 SideBar 组件中，我想让名称和电子邮件值自动更新，而无需刷新页面。姓名和电子邮件可以在 editProfile.tsx 中更新。

我想在 editProfile.tsx 页面上，单击“保存”按钮时，表单上的值也会更改。 SideBar.tsx 页面也是如此，以便它可以立即显示 Redux 状态的最新值。

Answer 1

用户名和电子邮件不会更新，因为您正在更新本地状态，而不是 redux 中的全局状态。一般来说，您不应该通过全局状态来初始化本地状态（这是一种反模式，会导致不可预测的重新渲染行为，例如您的行为）。您应该使用操作和化简器来直接更新全局状态，然后直接从另一个组件中的全局状态渲染它们。简而言之，在您的情况下，您更新本地状态，它对全局状态没有影响。

致以诚挚的问候！