我无法让我的产品列表显示更新后的列表。产品在数据库中更改，但在页面上没有更改：
Products.jsx：
export default class Products extends Component {
constructor(props) {
super(props);
this.state = {
currentMode: 'read',
productId: null,
products: []
};
}
changeAppMode = (newMode, productId) => {
this.setState({currentMode: newMode});
if(productId !== undefined){
this.setState({productId: productId});
}
}
render() {
var modeComponent =
<ReadProductsComponent changeAppMode={this.changeAppMode} productId={this.state.productId} />;
switch(this.state.currentMode){
case 'read':
break;
case 'update':
modeComponent = <UpdateProductComponent productId={this.state.productId} changeAppMode={this.changeAppMode}/>;
break;
default:
break;
}
return (
modeComponent
)
}
}
产品列表页面：
import React, { Component } from 'react'
import {GetData} from '../../services/GetData';
import ProductsTable from './product_table.component';
import TopActionsComponent from './top_actions.component';
// component that contains all the logic and other smaller components
// that form the Read Products view
export default class ReadProductsComponent extends Component {
constructor(props) {
super(props);
this.state = {
products: []
};
}
componentWillMount() {
console.log("componentWillMount",this.state);
if(sessionStorage.getItem("userData")){
this.getProducts();
}
else{
sessionStorage.setItem("userData",'');
sessionStorage.clear();
this.setState({redirectToReferrer: true});
}
}
getProducts() {
let data = JSON.parse(sessionStorage.getItem("userData"));
this.setState({name:data.userData.name});
if (data) {
this._asyncRequest = GetData('../products/', 'Bearer ' + data.userData.token)
.then(response => {
//console.log('read response: !!!! ' + JSON.stringify(response));
this._asyncRequest = null;
// create an array of Customers only with relevant data
const newProducts = response.map(c => {
return {
id: c.id,
name: c.prodName,
description: c.description,
buyPrice: c.buyPrice,
bandA: c.bandA,
bandB: c.bandB,
bandC: c.bandC
};
});
// create a new "State" object without mutating
// the original State object.
const newState = Object.assign({}, this.state, {
products: newProducts
});
// store the new state object in the component's state
this.setState(newState);
})
.catch(error => console.log(error));
}
}
componentWillUnmount() {
if (this._asyncRequest) {
this._asyncRequest.cancel();
}
}
render() {
// list of products
var filteredProducts = this.state.products;
return (
<div className='overflow-hidden'>
<TopActionsComponent changeAppMode={this.props.changeAppMode} />
<ProductsTable
products={filteredProducts}
changeAppMode={this.props.changeAppMode} />
</div>
);
}
}
更新产品组件：
X
export default class UpdateProductComponent extends Component {
constructor(props) {
super(props);
this.state = {
products: [],
prodName: '',
description: '',
buyPrice: 0,
dutyPrice: 0,
id:0,
successCreation: null
};
}
// on mount, fetch product data to stored them as this component's state
componentDidMount() {
// read one product data
var productId = this.props.productId;
this.getProduct(productId);
}
getProduct(id) {
let data = JSON.parse(sessionStorage.getItem("userData"));
this.setState({name:data.userData.name});
if (data) {
GetData(`../products/${id}`, 'Bearer ' + data.userData.token)
.then(response => {
const product = response;
this.setState({id: product.id});
this.setState({prodName: product.prodName});
this.setState({description: product.description});
this.setState({buyPrice: product.buyPrice});
})
.catch(error => console.log(error));
}
}
componentWillUnmount() {
const newState = Object.assign({}, this.state, {
products: null
});
this.setState(newState);
}
// handle name change
onNameChange = (e) => {
this.setState({name: e.target.value});
}
// handle description change
onDescriptionChange = (e) => {
var val =e.target.value;
this.setState({description: val});
}
// handle price change
onPriceChange = (e) => {
this.setState({buyPrice: e.target.value});
}
// handle save changes button clicked
onSave= (e) => {
// data in the form
var form_data={
id:this.state.id,
description: this.state.description,
buyPrice: this.state.buyPrice,
prodName: this.state.prodName
};
let data = JSON.parse(sessionStorage.getItem("userData"));
PostApiData(`../products/${this.state.id}`, 'Bearer ' + data.userData.token,
JSON.stringify({
id:this.state.id,
description: this.state.description,
buyPrice: this.state.buyPrice,
prodName: this.state.prodName
}) , 'PUT'
)
.then((result) => {
//let responseJson = result;
console.log("Successful" + JSON.stringify(result));
});
e.preventDefault();
}
render() {
return(
<div>
{
this.state.successUpdate === "Product was updated." ?
<div className='alert alert-success'>
Product was updated.
</div>
: null
}
{
this.state.successUpdate === "Unable to update product." ?
<div className='alert alert-danger'>
Unable to update product. Please try again.
</div>
: null
}
<a href=''
onClick={() => this.props.changeAppMode('read', this.state.id)}
className='btn btn-primary margin-bottom-1em'
>
Read Products..
</a>
<form onSubmit={this.onSave}>
<table className='table table-bordered table-hover'>
<tbody>
<tr>
<td>Name</td>
<td>
<input
type='text'
className='form-control'
value={this.state.prodName}
required
onChange={this.onNameChange} />
</td>
</tr>
<tr>
<td>Description</td>
<td>
<textarea
type='text'
className='form-control'
required
value={this.state.description}
onChange={this.onDescriptionChange.bind(this)}></textarea>
</td>
</tr>
<tr>
<td>Price ($)</td>
<td>
<input
type='number'
step="0.01"
className='form-control'
value={this.state.buyPrice}
required
onChange={this.onPriceChange}/>
</td>
</tr>
<tr>
<td></td>
<td>
<button
className='btn btn-primary'
onClick={this.onSave}>Save Changes</button>
</td>
</tr>
</tbody>
</table>
</form>
</div>
);
}
更新产品页面保存后显示正确的数据，并正确更新数据库。回到产品页面后，它会显示旧值。
有什么建议吗？