React 구성 요소 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()을 사용할 수 있습니다.

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 2

이 기능을 사용해보십시오. 이 편집하거나 별도의 답변을 확인하시기 바랍니다 왜 누군가가 알고있는 경우

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

는

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

이어야한다.

Answer 3

사용 value 대신 defaultValue 입력 사업부의 :