React如何正确更新state并提交textarea内容到MongoDB

前端核心错误 #

你的输入框值始终为初始值Ford，是两个低级错误导致的：

• 绑定value属性时写法错误：this.setState.val是无效写法，setState是组件提供的状态更新方法，不是存储状态值的对象，读取状态值必须用this.state.val
• 缺少输入同步逻辑：React的受控表单组件不会自动把用户输入同步到state，必须给输入框绑定onChange事件，在事件触发时手动把输入内容更新到state，否则state里的val永远停留在初始化的Ford值。

修正后的textarea代码如下：

<textarea
  className="message"
  placeholder="Write me somthing!. Also, double click to ping:) "
  value={this.state.val}
  onChange={(e) => this.setState({ val: e.target.value })}
></textarea>

额外说明：textarea标签不需要加type="text"属性，该属性对textarea无效。另外你按钮点击事件里调用的this.magic()方法在当前贴出的代码中没有定义，运行时会直接抛出异常，记得补全实现或者暂时注释掉。

后端核心错误 #

你的后端代码缺少请求体解析中间件，就算前端传值正常，后端也拿不到req.body的内容，会直接报undefined错误：

• 在所有路由定义之前，加上Express自带的请求体解析中间件：

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

其余冗余问题：你重复写了三次完全相同的cors跨域配置，只需要保留第一次的全局配置即可，重复写没有任何作用。另外/stored路由中直接使用db.collection，需要确保你从数据库连接文件中正确导入了连接成功的db实例，否则会报db未定义的错误。

验证方法 #

所有修改完成后，重启前后端服务，在文本框输入内容后点击提交，前端控制台会打印出你输入的实际内容，后端也能正常接收到请求体数据，内容即可正常写入MongoDB。

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