reactjs 如何使用useState()在React中存储对象数组?

yuvru6vn  于 2023-11-18  发布在  React
关注(0)|答案(1)|浏览(182)

我正在学习React并构建一个CV申请表。
我在将表单中的值存储到数组中的对象时遇到了问题。这很奇怪,因为它似乎对未定义的变量有效,但对已定义的位置变量无效。
我假设我可以让一个对象保持一种状态,换句话说,我不必为每个表单输入都有单独的状态。

  1. import { useState } from 'react';
  2. function EducationInfo() {
  3. const [input, setInput] = useState([]);
  4. const onChange = (e) => {
  5. const { name, value } = e.target;
  6. console.log(`${name}: ${value}`);
  7. };
  8. const addEducation = () => {
  9. const educationNew = {
  10. school: school.value, // 'school' is undefined, red squiggly line in vsCode
  11. degree: degree.value, // 'degree' is undefined, red squiggly line in vsCode
  12. startDate: startDate.value, // 'startDate' is undefined, red squiggly line in vsCode
  13. endDate: endDate.value, // 'endDate' is undefined, red squiggly line in vsCode
  14. location: location.value, // actual variable but undefined when saving to array.
  15. };
  16. setInput([...input, educationNew]);
  17. };
  18. console.log(input);
  19. return (
  20. <>
  21. <form onSubmit={(e) => e.preventDefault}>
  22. <h2>Experience</h2>
  23. <div className='experienceContainer'>
  24. <label htmlFor='school'>School</label>
  25. <input type='text' name='school' id='school' onChange={onChange} />
  26. <label htmlFor='degree'>Degree</label>
  27. <input type='text' name='degree' id='degree' onChange={onChange} />
  28. <div className='dateContainer'>
  29. <label htmlFor='startDate'>Start Date</label>
  30. <input type='date' name='startDate' id='startDate' onChange={onChange} />
  31. <label htmlFor='endDate'>End Date</label>
  32. <input type='date' name='endDate' id='endDate' onChange={onChange} />
  33. </div>
  34. <label htmlFor='location'>Location</label>
  35. <input type='text' name='location' id='location' onChange={onChange} />
  36. </div>
  37. <button
  38. className='SubmitBtn'
  39. type='button'
  40. onClick={addEducation}
  41. onSubmit={(e) => e.preventDefault}
  42. >
  43. Save
  44. </button>
  45. </form>
  46. </>
  47. );
  48. }
  49. export default EducationInfo;

字符串
VS代码:


的数据
这是单击保存按钮后控制台显示的内容:


7uzetpgm

7uzetpgm1#

使用一个不同的名称为位置一样locate. value我认为这将工作.

相关问题