useForm()在使用useEffect() - Next.js获取数据后不更新

Question

使用useEffect从数据库获取数据后，表单没有得到更新。

useEffect

useEffect(() => {
async function fetchData() {
const res = await fetch(process.env.NEXT_PUBLIC_API + `/resume/${user?.sub?.split('|')[1]}`);
const data = await res.json();
updateResume(data?.resume || {});
}
fetchData();
}, []);

useState

const [storedResume, updateResume] = useState({} as any);

useForm

const { register, handleSubmit, watch, formState: { errors } } = useForm<any>({
resolver: yupResolver(schema),
defaultValues: storedResume || {},
});

我也试过将storeresume更改为变量和useRef。不工作。

另外，我可以在console.log()

中看到数据我不能使用getStaticProps从Next.js，因为我需要userId传入fetch URL。

完整源代码🔗

数据来自DB

{"_id":"6167140a042e6430dd849603","user":"104494318779322042776","resume":{"personal":{"firstName":"Aravind","lastName":"Appadurai","email":"[e-mail]","phone":"9710549943","summary":"To gain a dynamic and challenging role in Information Technology, that will offer me the best opportunity for the further development of abilities, skills, and knowledge in a well-established firm with long term career growth possibilities."},"education":[{"institution":"Bhajarang Engg College","subject":"B. Tech (Information Technology)","startDate":"2010-04","endDate":"2014-04","score":7.5,"location":"Chennai","index":0},{"institution":"Salvation Matriculation School","subject":"HSC (12th)","startDate":"2009-04","endDate":"2010-04","score":6.5,"location":"","index":1}],"employment":[{"title":"Senior Software Engineer II","company":"Everi Fintech","startDate":"2018-08","endDate":"","location":"Chennai","isCurrent":true,"summary":"Leading and Co-ordinating the team and completing the project/features/work item on the time. Supporting the peer for their queries and issues. Attending the meeting with management and consolidating the requirements. Supporting for Production issues.","index":0},{"title":"Senior Engineer","company":"CSS Corp","startDate":"2017-02","endDate":"2021-07","location":"Chennai","isCurrent":false,"summary":"Maintaining and Feature enhancement for existing web application using ASP.NET MVC, C#, Oracle Databases, Web/Windows Service, ADS server and Angular.n","index":1}],"skills":[{"name":"Node.js","level":3,"index":0},{"name":"JavaScript","level":3,"index":1},{"name":"TypeScript","level":3,"index":2},{"name":"React.js","level":2,"index":3},{"name":"Next.js","level":3,"index":4},{"name":"Express.js","level":4,"index":5},{"name":"Angular.js","level":2,"index":6}],"language":[{"name":"Tamil","level":3,"index":0},{"name":"English","level":3,"index":1}],"links":[{"label":"Blog","link":"https://www.aravin.net","index":0},{"label":"GitHub","link":"https://www.github.com/aravin","index":1}],"course":[{"name":"70-483 - Programming in C# (MCP)","institution":"Microsoft","startDate":"","endDate":"","email":"[e-mail]","phone":"9710549943","index":0}],"reference":[{"name":"Friend Name","company":"Google","email":"[e-mail]","phone":"9710549943","index":0}]}}

Answer 1

经过大量分析，通过在useEffect

中调用useForm的reset修复了这个问题

useEffect(() => {
setResume(data?.resume);
reset(data.resume); --> FIX
}, [reset, data.resume]);

const { register, handleSubmit, watch, reset, formState: { errors } } = useForm<any>({
resolver: yupResolver(schema),
defaultValues: storedResume || {},
});