时间戳

首页 > 解决方案 > 无法设置更新对象属性的状态

javascript - 无法设置更新对象属性的状态

问题描述

我有一个处理程序，旨在更新我的“选定”数组状态的“数量”属性。对于不同的项目，我有多个字段，用户必须更新其数量。但是，当我尝试更新状态时，我发现已达到最大深度。当我使用console.log 时，不知何故我收到了超过1000 个处理程序的调用。也许有人可以指导我做错了什么。这是代码：

{
  this.state.purchase.selected.map(item => {
    return (
       <Grid item xs={4}>
          <OrderItemsCard
             item={item}
               onChange={this.handleSelectedItemChange(item)} />
       </Grid>
             )
          })
        }
this.state = {
            purchase: {
                selected: [],
                comments: ''
            },
        }
   this.state.purchase.selected = []
        for (let i = 0; i <= data.length - 1; i++) {
            for (let j = 0; j <= items.length - 1; j++) {
                if (this.props.data[i] === this.props.items[j]._id) {
                    this.state.purchase.selected.push(this.props.items[j])
                }
            }
        }

 handleSelectedItemChange = (item) => {
        let selected = Object.assign([], this.state.purchase.selected)
        selected.forEach(selectedItem => {
                selectedItem.quantity = item.quantity
        })
        this.setState({selected})
    }

标签： javascriptreactjs

解决方案

代替：

 onChange={this.handleSelectedItemChange(item)}

它直接调用处理程序并将其结果作为事件处理程序传递，您想要传递一个函数：

 onChange={() => this.handleSelectedItemChange(item)}

而不是浅拷贝：

  let selected = Object.assign([], this.state.purchase.selected)

你想在那里深拷贝：

 let selected = this.state.purchase.selected.map(selected => {...selected});

推荐阅读