I have an array of objects. Each object represents a product and they are added and removed from this array and the DOM reflects this properly. Problem is when I update one of the properties of these objects the DOM doesn't reflect this update.
import React from 'react'
import './App.css'
var stack = React.createClass ({
getInitialState() {
return {order: []};
},
AddToOrder(amount, product) {
var order = this.state.order, isInOrder = false;
order.map((object, i) => {
if (object.productId === product.productId) {
object.amount = product.amount + amount; //This change doesn't show
isInOrder = true;
}
return;
})
if (!isInOrder) {
product.amount = amount;
order.push(product); //This change is updated
}
this.setState({order: order});
},
render() {
return (
<table>
{<OrderRow products={this.state.order}/>}
</table>
)
}
})
class OrderRow extends React.Component {
render() {
return (
<tbody>
{this.props.products.map((object, i) => {
return <tr key={i}>
<td> {object.name}</td>
<td>
<input
type='number' defaultValue={object.amount} /> //This doesn't update in DOM when I change the products amount in stack component
</td>
</tr>;
})}
</tbody>
);
}
}
export default stack;
In this example the "ChangeName" functions changes however are reflected in the DOM. Why is this?
import React from 'react'
import './App.css'
var stack = React.createClass ({
getInitialState() {
return {order: []};
},
AddToOrder(amount, product) {
var order = this.state.order;
var isInOrder = false;
order.map((object, i) => {
if (order[i].productId === product.productId) {
order[i].amount = product.amount + amount; //This change doesn't show
isInOrder = true;
}
return;
})
if (!isInOrder) {
product.amount = amount;
order.push(product); //This change is updated
}
this.setState({order: order});
return;
},
changeName() {
var order = this.state.order;
order[0].name = "name changed"; //Make sure there is one object in order
this.setState({order: order});
},
render() {
return (
<table>
{<OrderRow products={this.state.order}/>}
</table>
)
}
})
class OrderRow extends React.Component {
render() {
return (
<tbody>
{this.props.products.map((object, i) => {
return <tr key={i}>
<td> {object.name}</td>
<td>
<input
type='number' defaultValue={object.amount} />
</td>
</tr>;
})}
</tbody>
);
}
}
Try this function:
AddToOrder(amount, product) {
var order = this.state.order, isInOrder=false;
for(let i in order){
if(order[i].productId === product.productId){
order[i].amount = product.amount + amount;
isInOrder = true;
break; // break it if table contains unique entries
}
}
if (!isInOrder) {
product.amount = amount;
order.push(product);
}
this.setState({order: order});
return;
}
您可以为此使用forceUpdate() 。
Use value
instead of defaultValue
in input div.
<input type='number' defaultValue={object.amount} />
Should be
<input type='number' value={object.amount} />
If someone knows why this is, please edit or make a separate answer.
this is because you are using class component inside render you should use the orderRow as a function and call it inside the render function as {orderRow();}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.