reactjs React状态未按预期更新,后端无法识别主体中的值

nuypyhwy  于 2024-01-07  发布在  React
关注(0)|答案(1)|浏览(119)

我有一个组件,它是有条件地设置值的基础上一块状态和按钮点击,通过数据对象的RTK查询和发送到一个控制器。有两个方面是令人困惑的我。第一,控制台日志显示,值得到设置成状态是相反的,他们应该是什么,和第二,mongoose/express控制器不会根据req.body中传递的值进行响应,而是继续提供已经存在的值。
该按钮是用户切换提交或取消提交的方式,如果提交已经为真,则按钮正确显示为取消提交,onClick应将值设置为false和2个空字符串,但提供相反的结果。如果提交为假,则按钮正确显示为提交,onClick应将值设置为true并填充字符串,但提供相反的结果。
React组件:

  1. const Submit = ({ planId, plan, user, today}) => {
  2. const [isSubmitted, setIsSubmitted] = useState(plan.submitted);
  3. const [submitBy, setSubmitBy] = useState(plan.submittedBy);
  4. const [submitDate, setSubmitDate] = useState(plan.submittedDate);
  5. const [skip, setSkip] = useState(true)
  6. const [userId, setUserId] = useState()
  7. const [updateStatus] = useUpdateReportStatusMutation()
  8. const {data} = useGetUserQuery(userId, {skip})
  9. useEffect(() => {
  10. if(isSubmitted) {
  11. setUserId(plan.submittedBy),
  12. setSkip(false)
  13. }
  14. }, [isSubmitted])
  15. const onSubmit= async (data) => {
  16. console.log('onSubmit: ', data) //This shows the data as reflected by the onClick functions
  17. try {
  18. const payload = await updateStatus({ planId, data }).unwrap();
  19. console.log('fulfilled', payload) //continues to show the same already existing data
  20. } catch (err) {
  21. console.error('Failed to update report status: ', err)
  22. }
  23. toast.success("Report Status Updated", {
  24. position: toast.POSITION.TOP_RIGHT
  25. });
  26. }
  27. const handleUnsubmitValues = () => {
  28. setIsSubmitted(false)
  29. setSubmitBy('')
  30. setSubmitDate( '')
  31. console.log("values for unsubmit: ", isSubmitted, submitBy, submitDate) //this is currently logging- isSubmitted: true, submitBy: 'the users ID', submitDate: 'an ISO date string'
  32. handleSubmit()
  33. }
  34. const handleSubmitValues = () => {
  35. setIsSubmitted(true)
  36. setSubmitBy(user)
  37. setSubmitDate(today)
  38. console.log("values for submit", isSubmitted, submitBy, submitDate) //this is logging- isSubmitted: false, submitBy: '', submitDate: ''
  39. handleSubmit()
  40. }
  41. const handleSubmit = () => {
  42. const data = {
  43. submitted: isSubmitted,
  44. submittedBy: submitBy,
  45. submittedDate: submitDate
  46. }
  47. console.log("before submit", data) //this logs the same values as the function call
  48. onSubmit(data)
  49. }
  50. const subDate = new Date(plan.submittedDate).toLocaleDateString()
  51. return (
  52. <>
  53. {isSubmitted ? (
  54. <>
  55. <CheckBoxIcon />
  56. <label>{data?.fullName}</label><br />
  57. <label>{subDate}</label><br />
  58. <Button color='warning' variant='contained' onClick={handleUnsubmitValues}>Unsubmit</Button>
  59. </>
  60. ) :
  61. <>
  62. <CheckBoxOutlineBlankIcon />
  63. <Button color='primary' variant='contained' onClick={handleSubmitValues}>Submit Report</Button>
  64. </>
  65. }
  66. <br />
  67. </>
  68. )
  69. }

字符串
mongoose/ express控制器:

  1. exports.updateReportStatus = async (req, res) => {
  2. console.log("req.body", req.body) //logs the values as supplied by the onSubmit
  3. try {
  4. const servicePlan = await ServicePlan.findOne({ _id: req.params.planId })
  5. if (req.body.submitted) {
  6. servicePlan.submitted = req.body.submitted
  7. }
  8. if (req.body.submittedBy) {
  9. servicePlan.submittedBy = req.body.submittedBy;
  10. }
  11. if (req.body.submittedDate) {
  12. servicePlan.submittedDate = req.body.submittedDate
  13. }
  14. if (req.body.approved) {
  15. servicePlan.approved = req.body.approved
  16. }
  17. if (req.body.approvedBy) {
  18. servicePlan.approvedBy = req.body.approvedBy;
  19. }
  20. if (req.body.approvedDate) {
  21. servicePlan.approvedDate = req.body.approvedDate
  22. }
  23. if (req.body.sent) {
  24. servicePlan.sent = req.body.sent
  25. }
  26. if (req.body.sentBy) {
  27. servicePlan.sentBy = req.body.sentBy;
  28. }
  29. if (req.body.sentTo) {
  30. servicePlan.sentTo = req.body.sentTo
  31. }
  32. if (req.body.sentDate) {
  33. servicePlan.sentDate = req.body.sentDate
  34. }
  35. console.log("status ", servicePlan) //logs the same existing values, regardless of req.body
  36. servicePlan.save()
  37. res.send(servicePlan)
  38. } catch (error) {
  39. res.status(404)
  40. res.send({ error: "Error updating report status", error})
  41. }
  42. }


用于提交的值的控制台日志(应该为true和填充字符串):

  1. values for submit false <empty string> <empty string>
  2. before submit
  3. Object { submitted: false, submittedBy: "", submittedDate: "" }
  4. onSubmit:
  5. Object { submitted: false, submittedBy: "", submittedDate: "" }


unsubmit的console.log值(应该是false和空字符串,如上所述)

  1. values for unsubmit: true 62410a1dcaac9a3d0528de7a 2022-09-15T15:55:27.758Z
  2. before submit
  3. Object { submitted: true, submittedBy: "62410a1dcaac9a3d0528de7a", submittedDate: "2022-09-15T15:55:27.758Z" }
  4. onSubmit:
  5. Object { submitted: true, submittedBy: "62410a1dcaac9a3d0528de7a", submittedDate: "2022-09-15T15:55:27.758Z" }


下面是一个网络调用,显示了在请求中传递的主体和没有响应的响应:
x1c 0d1x的数据



对于记录和传递值的状态问题,我尝试切换onClick调用的函数,但这只是使控制按钮的状态没有更新。我唯一的猜测是,在设置状态和将值传递给前端的handlesubmit之间,函数调用有延迟,只要后端没有用req.body值更新模型,我完全不知道该怎么办。

vxbzzdmp

vxbzzdmp1#

我通过引入React-Hook-Form并在更新函数中的CheckBox Icons和setValue上使用register来使前端正常工作。
它没有解释为什么状态没有正确地更新到函数中提供的值,所以我在那里不知所措。
至少现在,使其成为onSubmit调用的值适合于传递的内容。

  1. const Submit = ({ planId, plan, user, today}) => {
  2. const [isSubmitted, setIsSubmitted] = useState(plan.submitted);
  3. const [skip, setSkip] = useState(true)
  4. const [userId, setUserId] = useState()
  5. const [updateStatus] = useUpdateReportStatusMutation()
  6. const {data: hasUser} = useGetUserQuery(userId, {skip})
  7. useEffect(() => {
  8. if(isSubmitted) {
  9. setUserId(plan.submittedBy),
  10. setSkip(false)
  11. }
  12. }, [isSubmitted])
  13. const {register, handleSubmit, setValue} = useForm({
  14. defaultValues: {
  15. submitted: isSubmitted || false,
  16. submittedBy: plan.submittedBy || '',
  17. submittedDate: plan.submittedDate || ''
  18. }
  19. })
  20. const onSubmit= async (data) => {
  21. console.log('onSubmit: ', data)
  22. try {
  23. const payload = await updateStatus({ planId, data }).unwrap();
  24. console.log('fulfilled', payload)
  25. } catch (err) {
  26. console.error('Failed to update report status: ', err)
  27. }
  28. toast.success("Report Status Updated", {
  29. position: toast.POSITION.TOP_RIGHT
  30. });
  31. }
  32. const handleUnsubmitValues = () => {
  33. setIsSubmitted(false)
  34. setValue('submitted', false)
  35. setValue('submittedBy', '')
  36. setValue('submittedDate', '')
  37. }
  38. const handleSubmitValues = () => {
  39. setIsSubmitted(true)
  40. setValue('submitted', true)
  41. setValue('submittedBy', user)
  42. setValue('submittedDate', today)
  43. }
  44. const subDate = new Date(plan.submittedDate).toLocaleDateString()
  45. return (
  46. <>
  47. {isSubmitted ? (
  48. <>
  49. <form id='unsubmitForm'
  50. onSubmit={(e) => [
  51. handleUnsubmitValues(),
  52. handleSubmit(onSubmit)(e).catch((e) => {
  53. console.log("e", e);
  54. })]}
  55. >
  56. <CheckBoxIcon
  57. {...register('submitted')}
  58. {...register('submittedBy')}
  59. {...register('submittedDate')}
  60. />
  61. <label>{hasUser?.fullName}</label><br />
  62. <label>{subDate}</label><br />
  63. <Button color='warning' variant='contained' form='unsubmitForm' type='submit'>Unsubmit</Button>
  64. </form>
  65. </>
  66. ) :
  67. <>
  68. <form id='submitForm'
  69. onSubmit={(e) => [
  70. handleSubmitValues(),
  71. handleSubmit(onSubmit)(e).catch((e) => {
  72. console.log("e", e);
  73. })]}
  74. >
  75. <CheckBoxOutlineBlankIcon
  76. {...register('submitted')}
  77. {...register('submittedBy')}
  78. {...register('submittedDate')}
  79. />
  80. </form>
  81. <Button color='primary' variant='contained' form='submitForm' type='submit'>Submit Report</Button>
  82. </>
  83. }
  84. <br />
  85. <br />
  86. </>
  87. )
  88. }

字符串

展开查看全部

相关问题