保存的数据值未在反应前端正确保存

Question

下午好，

对于我的最终项目，我创建了一个提醒应用程序，您可以在其中添加任务名称、任务详细信息、日期和时间。 我的后端是用 java spring boot 创建的，我使用的是 MySQL 服务器。 当您将一些数据添加到应用程序中时，它会将其保存到数据库中，但所有内容都是 Null 而不是文本。 我到处寻找解决方案，但找不到任何解决方案。 我的猜测是我需要将文本从 React 转换为 java，但这也不起作用。

如果有人能指出我正确的方向，我将不胜感激！

import {useState} from "react";

const AddTask = ({onAdd}) => {
    const [text, setText] = useState('')
    const [details, setDetails] = useState('')
    const [day, setDay] = useState('')
    const [time, setTime] = useState('')
    const [reminder, setReminder] = useState(false)
const onSubmit = (e) => {e.preventDefault()
if (!text){
    alert('Please add a task')
    return
}
onAdd({text, day, reminder})
    setText('')
    setDetails('')
    setDay(Date)
    setTime(Date)
    setReminder(false)

}

return(
    <form className='add-form' onSubmit={onSubmit}>
        <div className='form-control'>
            <label>Task</label>
            <input type='text' placeholder='Add Task'
            value={text} onChange={(e) => setText(e.target.value)}/>
        </div>
        <div className='form-control'>
            <label>Task Details</label>
            <input type='text' placeholder='Add Task Details'
                   value={details} onChange={(e) => setDetails(e.target.value)}/>
        </div>
        <div className='form-control'>
            <label>Day</label>
            <input type='date' placeholder='Add Day'
                   value={day} onChange={(e) => setDay(e.target.value)}/>
        </div>  <div className='form-control'>
        <label>Time</label>
        <input type='time' placeholder='Add Time'
               value={time} onChange={(e) => setTime(e.target.value)}/>
    </div>
        <div className='form-control form-control-check'>
            <label>Set Reminder</label>
            <input type='checkbox'
                   checked={reminder}
                   value={reminder} onChange={(e) => setReminder(e.currentTarget.checked)}/>
        </div>

        <input type='Submit' value='save Task'
        className='btn btn-block' />
    </form>

提前谢谢你！

以下是一些图片：

[

Answer 1

您可以创建一个对象并在需要时更改它的值，而不是为表单的每个元素创建一个状态。这是我的方法。

// Create a empty object to use on hook
const initialFormData = Object.freeze({
   task: '',
   details: ''
})
const [formData, updateFormData] = useState(initialFormData)

在您的表单输入中更改您的 onChange 以更新状态表单数据：

<TextField
   type="text"
   name="task"
   label="Task..."
   onChange={e => updateFormData({ ...formData, task: e.target.value })}
 />

在您的提交函数中，您可以通过访问状态对象来获取值：

const onSubmit = e -> {
   e.preventDefault()
   console.log(formData.task)
}