我正在尝试开发一个可编辑的表，用户可以在其中添加数据行，然后将它们发送到后端。
应用程序在 componentDidMount() 函数中获取当前数据。
数据呈现在反应表上。
用户使用添加按钮 addrow() 函数添加新行。
用户保存数据 - 将更新的数据发送到后端。这是发生错误的时间：
（错误）在 saveDataMeasurements = (measurements) =>{} 函数中，接收到的数据打印在 console.log 上，具有要发送到后端的所需状态。但是，发送的数据与接收的数据不同。我不知道为什么。
代码如下：
import React from 'react';
import ReactTable from "react-table";
import 'react-table/react-table.css';
import update from 'react-addons-update';
class DataCollectionDetailB extends React.Component{
constructor(props){
super(props)
this.state = {
data: []
};
this.renderEditable = this.renderEditable.bind(this);
}
renderEditable(cellInfo) {
return (
<div
style={{ backgroundColor: "#fafafa" }}
contentEditable
suppressContentEditableWarning
onBlur={e => {
const data = [...this.state.data];
data[cellInfo.index][cellInfo.column.id] = e.target.innerHTML;
this.setState({ data });
}}
dangerouslySetInnerHTML={{
__html: this.state.data[cellInfo.index][cellInfo.column.id]
}}
/>
);
}
addrow = () =>{
var objToday = new Date(),
weekday = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'),
dayOfWeek = weekday[objToday.getDay()],
domEnder = function() { var a = objToday; if (/1/.test(parseInt((a + "").charAt(0)))) return "th"; a = parseInt((a + "").charAt(1)); return 1 == a ? "st" : 2 == a ? "nd" : 3 == a ? "rd" : "th" }(),
dayOfMonth = today + ( objToday.getDate() < 10) ? '0' + objToday.getDate() + domEnder : objToday.getDate() + domEnder,
months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'),
curMonth = objToday.getMonth(),
curYear = objToday.getFullYear(),
curHour = objToday.getHours() > 12 ? objToday.getHours() - 12 : (objToday.getHours() < 10 ? "0" + objToday.getHours() : objToday.getHours()),
curMinute = objToday.getMinutes() < 10 ? "0" + objToday.getMinutes() : objToday.getMinutes(),
curSeconds = objToday.getSeconds() < 10 ? "0" + objToday.getSeconds() : objToday.getSeconds(),
curMeridiem = objToday.getHours() > 12 ? "PM" : "AM";
var today = curYear + "-" + (curMonth + 1) + "-" + dayOfMonth.slice(0,2)
var newrow = new Array();
newrow.id = 0;
newrow.date = today;
newrow.location_lat = 0;
newrow.location_lon = 0;
newrow.value = 0;
var updateData = update(this.state.data, {$push: [newrow]});
this.setState({data:updateData});
}
saveDataMeasurements = (measurements) =>{
//send measurements to back end
console.log(measurements) //the data here is ok
fetch('http://localhost:3000/measurementsinsert', {
method: 'post',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
measurements: measurements //this data is different and dont present the 2 rows added
})
})
.then(response => response.json())
.then(data =>{
console.log(data)
})
.catch(error => { console.log('measurements insertions have failed', error); });
}
componentDidMount(){
//get current measurements for field gs data collection task id on back end
fetch('http://localhost:3000/measurementsfortaskgs', {
method: 'post',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
fieldgstask: this.props.field_gs_data_collection_task_id.fieldgsdc_id
})
})
.then(response => response.json())
.then(data => {
if (data.length > 0) {
this.setState({data:data})
}else {
var newrow = new Array();
newrow.id = 0;
newrow.date = 0;
newrow.location_lat = " ";
newrow.location_lon = " ";
newrow.value = " ";
this.setState({data:newrow})
}
})
.catch(error => { console.log('request failed', error); });
}
render() {
console.log("PROPS", this.state)
const { data } = this.state;
const columns=[
{
Header: "Id Data Collection Task",
accessor: "id"
},
{
Header: "Date",
accessor: "date",
Cell: this.renderEditable
},
{
Header: "Latitude",
accessor: "location_lat",
Cell: this.renderEditable
},
{
Header: "Longitude",
accessor: "location_lon",
Cell: this.renderEditable
},
{
Header: "Value",
accessor: "value",
Cell: this.renderEditable
}
]
return(
<div>
<p>Input the measurements in the table bellow</p>
<button type="button" id="add" onClick={this.addrow}> Add </button>
<ReactTable
data={data}
columns={columns}
/>
<button type="submit" onClick={() => { this.saveDataMeasurements(data) }}>Save</button>
</div>
)}
}
export default DataCollectionDetailB;