我正在創建一個專案，我們可以在其中添加和編輯用戶。為了編輯用戶，我使用react-router-dom Link從一個頁面到另一個頁面并使用useParams鉤子將 id 作為 url 引數發送。我正在取那個id。這是id我用來設定要形成的資料的。我將所有用戶存盤在redux store. 現在的問題是，當我重新加載資料從花一些時間來加載頁面redux store和setValue中useFormHook拋出一個錯誤。
import React, { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { useSelector } from "react-redux";
import { useParams } from "react-router-dom";
import { fetchData } from "./utils/index";
import { UpdateStudent} from "./utils/index";
function Update() {
const users = useSelector((state) => state.students);
console.log(users);
const [students, setStudents] = useState([]);
const {
register,
handleSubmit,
setValue,
formState: { errors, isDirty, isValid },
} = useForm({ mode: "onChange" });
let { id } = useParams();
var user = students && students.filter((u) => u.id === parseInt(id));
useEffect(() => {
fetchData();
}, []);
useEffect(() => {
setStudents(users);
}, [users]);
useEffect(() => {
setValue("name", user.name);
}, []);
const onUpdate = (data) => {
};
return (
<form onSubmit={handleSubmit(onUpdate)}>
<div>
<input
{...register("name", {
})}
type="text"
className="form-control"
placeholder="Name"
/>
</div>
<button
color="primary"
type="submit"
disabled={!isDirty || !isValid}
>
Save
</button>
</form>
);
}
export default Update;
uj5u.com熱心網友回復：
我在當前專案中解決這個問題的方法是將組件分成 2 個，一個組件獲取用戶，一個僅在用戶可用時呈現。
function Update() {
const users = useSelector((state) => state.students);
console.log(users);
const [students, setStudents] = useState([]);
let { id } = useParams();
var user = students && students.filter((u) => u.id === parseInt(id));
useEffect(() => {
fetchData();
}, []);
useEffect(() => {
setStudents(users);
}, [users]);
if(!user) return null; // or progress indicator
return <UpdateForm user={user} />
}
function UpdateForm({user})
const {
register,
handleSubmit,
setValue,
formState: { errors, isDirty, isValid },
} = useForm({ mode: "onChange" });
useEffect(() => {
setValue("name", user.name);
}, []);
const onUpdate = (data) => {
};
}, [user.name]);
return (
<form onSubmit={handleSubmit(onUpdate)}>
<div>
<input
{...register("name", {
})}
type="text"
className="form-control"
placeholder="Name"
/>
</div>
<button
color="primary"
type="submit"
disabled={!isDirty || !isValid}
>
Save
</button>
</form>
);
}
export default Update;
uj5u.com熱心網友回復：
除了我在上面的評論中提到的問題之外，當students狀態更新時代碼不會處理。您可以稍微簡化代碼并students直接使用狀態，而不是在本地復制它。由于 redux 狀態有時在初始渲染周期中不可用，因此您需要使用useEffect依賴于用于更新表單狀態的狀態。
function Update() {
const users = useSelector((state) => state.students);
const {
register,
handleSubmit,
setValue,
formState: { errors, isDirty, isValid },
} = useForm({ mode: "onChange" });
const { id } = useParams();
useEffect(() => {
fetchData();
}, []);
useEffect(() => {
const user = users?.filter((u) => u.id === Number(id));
if (user) {
setValue("name", user.name);
}
}, [users]); // <-- add users to dependency to update form state
...
if (/* no form state yet */) {
return "Loading..."; // or some loading indicator
}
return (
... // form UI
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/338056.html