引自免费微信小程序：皆我百晓生
在React应用中将数据存入数据库，通常涉及前端发送异步请求到后端API，然后由后端处理并将数据存储到数据库中。这里我将提供一个基本的步骤和示例代码，用于展示如何在用户点击“发表”按钮时，发送POST请求到服务器，并保存留言信息。
首先，确保你已经安装了axios库，它是一个常用的JavaScript HTTP客户端，用于与后端API进行交互。如果没有安装，可以通过npm或yarn安装：
npm install axios
# 或者
yarn add axios
接下来，我们更新Liuyan组件，添加事件处理器来处理表单提交，并使用axios发送POST请求。为了简化起见，我将假设你已经有了一个名为/api/saveComment的后端API接口，这个接口负责接收并保存留言数据到数据库。
import React, { useState } from 'react';
import axios from 'axios';
import './index.scss';
const Liuyan = () => {
const [formData, setFormData] = useState({
title: '',
username: '',
identify: 'user',
text: ''
});
const handleSubmit = async (event) => {
event.preventDefault();
try {
await axios.post('/api/saveComment', formData);
alert('留言已成功发布');
// 清空表单数据（可选）
setFormData({ ...formData, title: '', username: '', identify: 'user', text: '' });
} catch (error) {
console.error('Error saving comment:', error);
alert('抱歉，保存留言时发生错误，请稍后再试');
}
};
const handleChange = (event) => {
setFormData({ ...formData, [event.target.name]: event.target.value });
};
return (
留言
);
};
export default Liuyan;
在这个例子中，我们使用了React的useState Hook来管理表单状态。当用户输入变化时，handleChange函数会被触发，从而更新状态。当用户点击“发表”按钮时，handleSubmit函数会被调用，阻止默认的表单提交行为，并通过axios向服务器发送POST请求。如果请求成功，我们会显示一条成功的消息并清空表单数据（这一步是可选的）。如果请求失败，我们将捕获错误并在控制台和用户界面上显示错误信息。
请注意，这个示例没有包含任何的身份验证逻辑。在实际应用中，你需要根据你的后端实现来决定如何处理未授权用户的操作，以及如何传递身份验证信息（例如，使用JWT令牌）。
此外，后端部分需要你自己实现，包括创建 /api/saveComment API 接口，从请求体中获取数据，然后将其保存到数据库中。这通常涉及到Node.js、Express框架以及一个数据库连接器（如MongoDB的mongoose、MySQL的mysql2等），具体取决于你的后端技术栈。
