Question

我有一个自定义钩子

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 组件使用来自自定义钩子的状态和函数。当此组件呈现时， selectedDevice 被分配为来自自定义钩子的设备的值。首次渲染时，值会正确显示在 from 上。但是，在我单击刷新后，自定义钩子中的设备状态消失，而 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>
    </>
  );
}

Answer 1

可能是persist the state after page refresh此链接可以帮助您解决问题。

页面刷新后组件状态消失

1 个答案: