Question

我有一个处理程序，旨在更新“选定”阵列状态的“数量”属性。我有多个用于不同项目的字段，这些字段的数量必须由用户更新。但是当我尝试更新状态时，我得到了达到最大深度的信息。当我使用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})
    }

Answer 1

代替：

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

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

1 个答案: