反應組件 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

試試這個功能：

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

您可以為此使用forceUpdate（） 。

Answer 3

在輸入div中使用value代替defaultValue 。

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

應該

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

如果有人知道這是為什么，請編輯或單獨回答。

Answer 4

這是因為您在渲染中使用類組件，您應該將 orderRow 用作函數並在渲染函數中將其調用為 {orderRow();}