MERN+Redux开发待办应用POST请求req.body键值反转问题求助

算力阿峰

2026-9-24

问题原因

你发送POST请求时直接将task输入框的纯字符串值作为请求体发送，没有封装为带task属性的对象。同时后端配置了urlencoded解析中间件，无=分隔符的纯字符串会被解析为「字符串内容为key、空字符串为value」的对象，因此出现了{jonas: ''}的异常结果。

修复方案

任选以下一种修改方式即可达到后端收到{task: 'jonas'}的预期效果：

方案1（推荐）：修改Form组件提交逻辑，传参时封装对象
找到Form组件的submitHandler方法，将dispatch(createTasks(task));修改为：
```
dispatch(createTasks({ task: task }));
```
方案2：修改API层请求逻辑，封装请求体
找到API层的addTasks方法，修改为：
```
export const addTasks = newTask => axios.post(url, { task: newTask });
```

可选优化项

后端app.js中重复注册了多次JSON解析中间件（bodyParser.json与express.json功能完全一致），可删除冗余配置避免潜在问题，修改后参考：
```
app.use(cors());
app.use(express.json({ limit: '10000kb' }));
app.use(express.urlencoded({ limit: '10000kb', extended: true }));
app.use(morgan('dev'));
```
Form组件中useState初始化可赋值为空字符串，避免初始值为undefined带来的异常：
```
const [task, setTask] = useState('');
```