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

Question

I'm trying to do CRUD operations using Mysql Database and Node Js. In my requirement i need to post data to the data base and view it on the window after the user logged in if the user wants to edit the contents in the data he can edit it using the edit button. Here I'm able to do all operations except editing the data and send it back to database when the user logged in next time the data need to be the updated data.

Here I'm attaching the code snippet below

 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;

Here if i use the commented code which i tried to fix the issue no data is displaying on the Home Page.

Here is the code for data base which is in node js.

In my Table I'm using Id,title & content .

Any help regarding this issue will be more than helpful for me. Thanks in advance.

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>