使用 React JS 应用程序在 Mysql 数据库中编辑和保存数据

Question

我正在尝试使用 Mysql 数据库和 Node Js 进行 CRUD 操作。在我的要求中，如果用户想要编辑数据中的内容，我需要将数据发布到数据库并在用户登录后在窗口中查看，他可以使用编辑按钮对其进行编辑。 在这里，我可以进行除编辑数据之外的所有操作，并在用户下次登录时将数据发送回数据库。

这里我附上下面的代码sn-p

import React, {
  Component
} from "react";
class Home extends Component {
  constructor() {

    super()

    this.state = {
      tableContent: [],
      task: ''
    }
  }

  logout() {

    window.location.href = '/login';

  }
  componentDidMount() {
    fetch('http://localhost:5001/getcontent', {
        method: 'GET',
        headers: {

          'Accept': 'application/json',
          'Content-Type': 'application/json'

        },

        //  body: JSON.stringify({task: this.state.task, id: this.state.editableTaskId}),



      }).then(Response => Response.json())

      .then(json => this.parseFunction(json))
      .catch(err => {
        console.log('error', err);
      }); {
      /*.then(res => res.json())
              .then(data => this.setState({
                task: '',
                editableTaskId: null,
                tableContent: this.state.tableContent.map(indx => 
                  indx.id === data.id ? data : indx)}))
              .catch(err => console.log(err))*/
    }


  }
  parseFunction(result) {

    console.log('result', result)

    this.setState({
      tableContent: result
    });
  };

  handleEdit = id =>

    this.setState({
      task: this.state.tableContent.find(indx => indx.id).task
    })

  render() {
    return (

      <
      div className = "contentbox" >

      <
      input type = "button"
      className = "btn1"
      id = "Logout"
      value = "Logout"
      onClick = {
        this.logout
      }
      />                 {
        this.state.tableContent.map((tableContent, index) => ( <
          p >
          <
          p style = {
            {
              float: "left"
            }
          } > {
            tableContent.title
          } - {
            tableContent.content
          } < /p><br></br >
          <
          button onclick = {
            this.handleEdit
          } > Edit < /button> <
          /p>

        ))
      }

      <
      /div>

    )


  }
}
export default Home;

如果我使用我试图解决问题的注释代码，主页上不会显示任何数据。

这是node js中的数据库代码。

在我的表格中，我使用的是 Id、title & content。

有关此问题的任何帮助对我来说都将大有帮助。提前致谢。

Answer 1

// Capitalized Response is a keyword, using lowercase just in case
.then((Response) => Response.json())

// your not passing the id here to handleEdit
<button onclick={this.handleEdit}>Edit</button>
// should be:
// <button onclick={() => this.handleEdit(tableContent.id)}>Edit</button>