react+node 连接数据库报错

Question

react+node 连接数据库报错--the server responded with a status of 500 (Internal Server Error)

import React from 'react'
import './index.scss'
import axios from 'axios';
class AddComments extends React.Component {
  // 初始化状态
  state = {
    comments: [
      { id: 1, name: 'cnyangx', content: '前排出售瓜子、汽水、辣条！！！' },
      { id: 2, name: '大脸猫', content: '沙发~' },
      { id: 3, name: '老张', content: '我有酒，你有故事吗' }
    ],
    userName: '',
    userContent: ''
  };
  handleForm = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    })
  };
  // 验证id唯一性
  verifyID = () => {
    const newID = Math.floor(Math.random() * 100000);
    const flag = this.state.comments.find(item => item.id === newID);
    console.log(flag)
    if (flag === -1) {
      this.verifyID()
    }
    return newID;
  };
  // 发表评论
  publishComments = async () => {
    const { userName, userContent } = this.state;
    if (userName.trim() === '' || userContent.trim() === '') {
      alert('请输入内容');
      return;
    }

    try {
      await axios.post('/api/v1/user/comments', { userName, userContent });
      // 成功后，你可以刷新评论列表，或者添加评论到本地状态，这里仅演示API调用
      alert('评论发表成功');
    } catch (error) {
      console.error('发表评论时出错:', error);
      alert('评论发表失败，请重试');
    }
  };
  renderList = () => {
    return this.state.comments.length === 0 ?
      (<div className="no-comments">暂无评论，快去抢沙发吧！</div>) :
      (
        <ul>
          {
            this.state.comments.map(item => (
              <li key={item.id}>
                <h4>评论人: {item.name}</h4>
                <p>评论内容：{item.content}</p>
              </li>
            ))
          }
        </ul>
      )
  };
  render() {
    const { userName, userContent } = this.state;
    return (
      <div className="app">
        <div>
          <input type="text"
            name="userName"
            value={userName}
            onChange={this.handleForm}
            className="user"
            placeholder="请输入评论人" />
          <br />
          <textarea name="userContent"
            className="content"
            value={userContent}
            onChange={this.handleForm}
            cols="30" rows="10"
            placeholder="请输入评论内容">
          </textarea>
          <br />
          <button onClick={this.publishComments}>发表评论</button>
        </div>
        {/*    渲染评论列表  使用三元表达式 */}
        {this.renderList()}
      </div>
    )
  }
}

// 导出
export default AddComments;

Answer 1

参考免费微信小程序：皆我百晓生 作答，经由专家-皆知整理回复，如问题解决，望采纳；如仍有疑问，请评论回复。

根据您提供的信息，您遇到的问题是尝试通过React前端应用向Node.js后端发送POST请求以保存评论时，后端返回了500内部服务器错误。这通常意味着在后端处理请求时发生了错误。让我们一步一步地解决这个问题。

首先，检查您的Node.js后端代码，特别是与数据库交互的部分，因为500错误很可能是因为数据库操作失败或者SQL查询有问题。确保您的数据库连接正确，并且您的数据库中确实有一个名为comments的表，且它有name和content这两个字段。

后端代码检查

您提供的后端代码片段看起来是在尝试执行一个SQL插入操作。请确认以下几点：

1. 数据库连接：确保您的数据库连接(pool)是正常建立的，没有其他未捕获的异常。
2. SQL语法：插入语句的语法看起来是正确的，但请确认表名和字段名称是否准确无误。
3. 错误处理：如果pool.query执行时发生错误，错误会被直接返回给客户端，但确保错误处理逻辑没有遗漏。您的代码看起来对此部分处理是正确的。

解决步骤

• 日志记录：在Node.js后端，增加更详细的错误日志记录。在pool.query的错误回调中，打印err对象的详细信息，这样可以帮助您定位错误的原因。

pool.query(sql, [userName, userContent], (err, results) => {
  if (err) {
    console.error('数据库查询错误:', err); // 增加这一行
    res.status(500).json({ msg: '服务器错误' });
  } else {
    res.status(200).json({ msg: '评论成功' });
  }
});

• 环境配置：确认数据库的配置（用户名、密码、数据库名等）在您的运行环境中是正确的。
• 数据库权限：确保用来连接数据库的用户有权限执行INSERT操作。

其他可能的排查方向

• 依赖问题：确保所有必要的数据库驱动（如mysql、pg等，取决于您使用的数据库）已正确安装并且版本兼容。
• 防火墙/网络：如果数据库是远程的，检查网络连接和数据库的防火墙设置，确保Node.js服务可以访问数据库。

如果您按照上述步骤操作后仍然遇到问题，请提供更详细的错误信息（例如控制台输出的错误日志），这样我可以提供更加针对性的帮助。