Реакция компонента DOM не обновляется

Question

У меня есть массив объектов. Каждый объект представляет собой продукт, и они добавляются и удаляются из этого массива, и 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> 
    ); 
    } 
} 

Answer 1

Для этого можно использовать forceUpdate().

Answer 2

Попробуйте эту функцию:

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

Answer 3

Использование value вместо defaultValue в входных делах.

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

Должно быть

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

Если кто-то знает, почему это, пожалуйста, изменить или сделать отдельный ответ.