React Hooks收集数据提交Express服务器后MongoDB无数据问题咨询

问题背景 #

我尝试在React中使用Hooks和State实现条件渲染，收集表单数据后发送到Express服务器，最终存储到MongoDB数据库。

核心问题 #

提交数据后查看MongoDB，未成功写入任何数据。

遇到的卡点 #

• 怀疑前端用于获取输入内容的Hook逻辑缺少关键部分，目前想到可能是各个组件没有正确配置"value"属性
• 尝试使用"checkbox"替代"radio"按钮实现其他组件的条件渲染，但无法达到预期效果，而使用"radio"按钮又会影响我将输入设为受控组件。

修复方案 #

修复点1：后端添加JSON解析中间件 #

你前端POST请求发送的是application/json格式的数据，但后端仅配置了urlencoded格式的解析，没有JSON解析逻辑，导致req.body为空，写入数据库的字段都是空值。
修改server.js代码，添加JSON解析：

// 原有配置后面新增一行
app.use(express.json())
// 也可以用bodyParser.json()，效果一致

修复点2：修正后端POST接口的字段取值 #

你前端发送的请求体字段是suburb和date，但后端现在从req.body取的是suburbInput和dateInput，对应不上导致值为空：
修改server.js的/register接口代码：

app.post('/register', (req,res) =>{
    const task = new Task({
        taskType : req.body.taskType,
        taskTitle : req.body.taskTitle,
        taskDesc : req.body.taskDesc,
        suburb : req.body.suburb, // 原来是req.body.suburbInput，修改为前端传的字段名
        date: req.body.date // 原来是req.body.dateInput，修改为前端传的字段名
    });
    // 建议把返回逻辑放到存库成功回调里，避免存库失败还返回成功
    task.save()
    .then(() => res.json('save to db: ' + task))
    .catch((err) => {
        console.log(err);
        res.status(500).json('save failed: ' + err)
    });
})

修复点3：修正前端在线模式下日期输入的name属性 #

你选择online类型时渲染的日期输入框name是date-input，和你state里定义的dateInput不一致，导致在线模式下选的日期无法存入state：
修改NewTask.js里online分支的TaskSetting组件属性：

<TaskSetting
    text="Date"
    type="date"
    name="dateInput" // 原来是date-input，修改为和state字段一致
    value={data.dateInput}
    onChange={handleCheck}
    // 其余样式属性不变
/>

修复点4：初始化state时同步taskType默认值 #

你默认选中的radio是inPerson，但初始state里taskType是空值，用户如果不手动切换radio直接提交，taskType字段为空：
修改NewTask.js的state初始化代码：

const [data, setData] = useState({
    taskType: 'inPerson', // 原来是空值，修改为和checked初始值一致
    taskTitle: '',
    taskDesc: '',
    suburbInput: '',
    dateInput: ''
})

关于radio和checkbox实现条件渲染的说明 #

• 你的场景是二选一的任务类型，用radio是合理的，目前代码已经是受控组件（checked属性绑定了state的checked值），不会影响受控组件的正常使用
• 如果要换成checkbox实现互斥效果，需要在change事件里手动判断选中状态，比如选中A时自动取消B的选中，逻辑比radio复杂，该场景不推荐使用checkbox

内容的提问来源于stack exchange，提问作者Jamie Nguyen