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 组件使用自定义挂钩中的状态和函数。当此组件呈现时, 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>
</>
);
}
解决方案
页面刷新后可能会保持状态,此链接可帮助您解决问题。
推荐阅读
- ruby - gem "jekyll" 的 Bundler 兼容版本
- spring - 为什么spring security hasRole函数不认证任何api
- yaml - 如何从 yaml 生成的字典中动态打印信息?
- wordpress - 用于登录和注册的 WooCommerce Rest API
- c# - 我可以在初始化程序中设置事件处理程序吗?
- testing - 无法激活最新的 Katalon studio 测试工具
- javascript - 在 Extjs 表单提交中 fileupload true 时编码表单数据
- events - 如何为 Ext.Msg 定义监听器?
- python - 如何修复“Pymysql 数据库未更新但您没有收到任何错误”
- javascript - 如何使用数据表添加自定义标题并制作全宽 PDF