Javascript 刷新页面后，组件状态消失

我有一个定制的钩子

import { useState } from "react";
import { useDispatch } from "react-redux";
import axios from "axios";
import getDevices from "../actions/devicesAtions";
import { isPositiveInteger, FORM_FIELDS } from "../helper";

export default function useDevice(value) {
  const dispatch = useDispatch();
  const [device, setDevice] = useState(value);
  const [msg, setMsg] = useState("");

  const saveDeviceChange = ({ target }) => {
    const { name, value } = target;

    setDevice({
      ...device,
      [name]: value
    });
    setMsg("");
  };

  const saveDeviceSubmit = async (
    e,
    axiosMethod,
    selectedUrl,
    newDevice = device
  ) => {
    e.preventDefault();
    const { system_name, type, hdd_capacity } = device;

    if (!system_name || !type || !hdd_capacity) {
      setMsg(
        `Please fill out ${!system_name ? FORM_FIELDS.SYS_NAME : ""} ${
          !type ? FORM_FIELDS.DEVICE_TYPE : ""
        } ${!hdd_capacity ? FORM_FIELDS.HDD_CAPACITY : ""}!`
      );
      return false;
    }

    if (!isPositiveInteger(hdd_capacity)) {
      setMsg(
        "Please enter a positive number or round it to the nearst whole number!"
      );
      return false;
    }

    try {
      await axios({
        method: axiosMethod,
        url: selectedUrl,
        data: device,
        headers: {
          "Content-Type": "application/json"
        }
      });
      dispatch(getDevices());
    } catch (err) {
      console.log(err);
    }

    setMsg("Changes have been made!");
    setDevice(newDevice);
  };

  return {
    device,
    setDevice,
    msg,
    setMsg,
    saveDeviceChange,
    saveDeviceSubmit
  };
}

EditDeviceWrapper组件使用自定义挂钩中的状态和函数。当该组件渲染时，所选设备被指定为来自自定义挂钩的设备的值。首次渲染时，值将正确显示在“源”上。但是，单击“刷新”后，自定义挂钩中的设备状态消失，而redux中的selectedDevice状态仍然存在。如何在刷新组件后从自定义挂钩维护设备状态

import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { useParams } from "react-router-dom";

import ReusedForm from "./ReusedForm";
import useDevice from "./useDevice";
import { getDeviceDetails } from "../actions/devicesAtions";

export default function EditDeviceWrapper() {
  const dispatch = useDispatch();
  const { selectedDevice } = useSelector((state) => state.allDevices);
  const { id } = useParams();

  useEffect(() => {
    dispatch(getDeviceDetails(id));
  }, [id, dispatch]);

  const { device, msg, saveDeviceChange, saveDeviceSubmit } = useDevice(
    selectedDevice
  );
  console.log(device, selectedDevice);

  return (
    <>
      <p className="form-msg">{msg}</p>

      <ReusedForm
        saveDeviceSubmit={(e) =>
          saveDeviceSubmit(e, "put", `http://localhost:3000/devices/${id}`)
        }
        selectDeviceValChange={saveDeviceChange}
        heading="Update Device"
        system_name={device.system_name}
        type={device.type}
        hdd_capacity={device.hdd_capacity}
      />

      <p>{id}</p>
    </>
  );
}

import React，{useffect}来自“React”；
从“react-redux”导入{useSelector，useDispatch}；
从“react router dom”导入{useParams}；
从“/ReusedForm”导入ReusedForm；
从“/useDevice”导入useDevice；
从“./actions/devicesAtions”导入{getDeviceDetails}；
导出默认函数EditDeviceWrapper（）{
const dispatch=usedpatch（）；
const{selectedDevice}=useSelector（（state）=>state.allDevices）；
const{id}=useParams（）；
useffect（（）=>{
调度（获取设备详细信息（id））；
}，[id，调度]；
const{device，msg，saveDeviceChange，saveDeviceSubmit}=useDevice(
选定设备
);
console.log（设备，所选设备）；
返回(
{msg}
saveDeviceSubmit（e，“put”`http://localhost:3000/devices/${id}`）
}
选择DeviceValChange={saveDeviceChange}
heading=“更新设备”
系统名称={device.system\u name}
类型={device.type}
hdd_容量={device.hdd_容量}
/>
{id}

);
}

这个链接可能会帮助您解决问题。

这是在两个地方保持相同状态的常见问题；你最终会处于发散状态。你有没有办法让Redux商店成为这些信息唯一存在的地方？那么你就没有机会让状态不同步。