Javascript 不更新组件DOM

我有一个对象数组。每个对象都代表一个产品，它们从这个数组中添加和删除，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;

从“React”导入React
导入“./App.css”
var stack=React.createClass({
getInitialState（）{
返回{顺序：[]}；
},
AddToOrder（金额、产品）{
var order=this.state.order，isInOrder=false；
order.map（（对象，i）=>{
if（object.productId==product.productId）{
object.amount=product.amount+amount；//此更改不显示
Isinonder=真；
}
返回；
})
如果（！Isinoder）{
product.amount=金额；
order.push（产品）；//此更改已更新
} 
this.setState（{order:order}）；
},
render（）{
返回(
{}
)
}
})
类OrderRow扩展了React.Component{
render（）{
返回(
{this.props.products.map（（对象，i）=>{
返回
{object.name}
//当我在堆栈组件中更改产品数量时，这不会在DOM中更新
;
})}
);
}
}
导出默认堆栈；

在本例中，“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>
    );
  }
}

从“React”导入React
导入“./App.css”
var stack=React.createClass({
getInitialState（）{
返回{顺序：[]}；
},
AddToOrder（金额、产品）{
var order=this.state.order；
var Isinoder=假；
order.map（（对象，i）=>{
if（订单[i].productId==product.productId）{
订单[i].amount=product.amount+amount；//此更改不显示
Isinonder=真；
}
返回；
})
如果（！Isinoder）{
product.amount=金额；
order.push（产品）；//此更改已更新
} 
this.setState（{order:order}）；
返回；
},
changeName（）{
var order=this.state.order；
顺序[0]。name=“name changed”；//确保顺序中有一个对象
this.setState（{order:order}）；
},
render（）{
返回(
{}
)
}
})
类OrderRow扩展了React.Component{
render（）{
返回(
{this.props.products.map（（对象，i）=>{
返回
{object.name}
;
})}
);
}
}

您可以使用此功能。

尝试此功能：

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;
}

---

在输入div中使用

value

而不是

defaultValue

<input type='number' defaultValue={object.amount} /> 

应该是

<input type='number' value={object.amount} /> 

---

如果有人知道原因，请编辑或单独回答。

嘿，不幸的是没有。似乎同样的东西写得有点不同？嘿，尽管我在AddToOrder函数的末尾使用了forceupdate，但它不会更新输入的默认值。将onChange函数添加到我的输入字段，并在函数中为道具提供一个新值修复了编辑问题。更多说明如下：