[英]React component DOM not updating
我有一组对象。 每个对象代表一个产品,它们被添加到这个数组中或从中删除,DOM 正确地反映了这一点。 问题是当我更新这些对象的其中一个属性时,DOM 不会反映此更新。
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;
在此示例中,“ChangeName”函数的更改会反映在 DOM 中。 为什么是这样?
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>
);
}
}
试试这个功能:
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() 。
在输入div中使用value
代替defaultValue
。
<input type='number' defaultValue={object.amount} />
应该
<input type='number' value={object.amount} />
如果有人知道这是为什么,请编辑或单独回答。
这是因为您在渲染中使用类组件,您应该将 orderRow 用作函数并在渲染函数中将其调用为 {orderRow();}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.