Question

我正在尝试将商品添加到购物车，并且仅当库存中的数量items.quantity大于或等于添加的数量items.qty时才设置条件设置状态但似乎忽略条件甚至是setState调用。

constructor(props) {
    super();
    this.state = {
      items: [

      ],
      x: 1,
      inventory: [
        {id: 0,name: "item 1",amount: 100.00, quantity: 1},
        {id: 1,name: "item 2",amount: 400.00, quantity: 2}
      ]
    }
  }  
addItem = (i) =>{
    const {items} = this.state;
    var id = this.state.inventory[i].id;
    items[id] = this.state.inventory[i];
    items[id].qty = items[id].hasOwnProperty('qty') ? items[id].qty+1 : 1;
    console.log(items[id].quantity>=items[id].qty);
    if(items[id].quantity>=items[id].qty){
      this.setState({
        items: items
      })
    }
    console.log(items);
    console.log(this.state.items[id].qty);
  }

和某处的List ......

const ItemList = ({ inventory,addItem }) =>
  <List style={styles.List}>
  {
    inventory.map((item) =>
    <ListItem key={item.id} primaryText={item.name}
    secondaryText={item.amount}
    rightIcon={<ActionInfo />}
    onClick={addItem.bind(this,item.id)} />)
  }
  </List>

...经过一个令人沮丧的周末终于让它发挥作用，尽管我仍然不完全理解为什么状态对象会改变。我想更多的阅读要做。

解决方案

addItem=(i)=>{
    let items = JSON.parse(JSON.stringify(this.state.items));
    let id = this.state.inventory[i].id;
    if(!items[id])
      items.push(this.state.inventory[i]);
    items[id].qty = items[id].hasOwnProperty('qty') ? items[id].qty+1 : 1;
    if(items[id].quantity>=items[id].qty){
      this.setState({items: items})
    }
  }

Answer 1

如果Items是一个数组，你可以

let newItems = this.state.items.slice();

这将创建一个新数组，但请记住它的内容不会被克隆..但我认为这个用例没问题。

let array1 = [{foo: 'bar'}];
let array2 = array1.slice();
array2.push({foo: 'new'});

// array 1 not affected
console.log(array1);

array1[0].foo = 'changed';
// array2 affected
console.log(array2);

如果您需要真正的深度克隆，可以使用lodash或JSON.parse(JSON.stringify(oldObj))。

Answer 2

如何修复它们：

const items = { ...this.state.items};

可能重复：React: can you use setState with existing state object?

在没有setState的情况下更新状态更新

2 个答案: