将项目推入空的 State 对象数组

Question

我正在尝试将新项目推送到 objects 的 State array 中，但遇到了一些问题。下面是我的代码。我确定我做错了什么

constructor(props) {
  super(props);
  this.state = {
    bill: []
  };
}

componentWillReceiveProps(nextProps, nextState) {
  if (nextProps.bills !== this.props.bills) {
    let billsObj = nextProps.bills
    billsObj.map((billsObj) => {
      var joined = this.state.bill.concat({billId:billsObj.id,checked:false});
      console.log(joined, "joined", this.state.bill)
      this.setState({
        bill: [...this.state.bill, ...joined]
      }, () => {
        console.log(this.state.bill, billsObj.id)
      })
    })
  }
}

在 componentWillReceiverProps 中，我得到 array 然后将其映射以将值推入 state array，但最后我只得到一个值在数组中，但是 props array 有 11 个值，而我在 state array 中只得到一个值。希望得到一些帮助。

Answer 1

如果要更新从当前状态派生的状态，则需要考虑以前的状态，这在 here 中有详细说明。这就是为什么您对 setState 的多次调用以状态数组中的最后一个 bill 结束。

如果您将 bills 保存在中间数组中，它将按预期工作，完成后只需 setState 一次：

componentWillReceiveProps(nextProps, nextState) {
  if (nextProps.bills !== this.props.bills) {
    const bill = nextProps.bills.map(bill => {
      return { billId: bill.id, checked: false };
    });

    this.setState({ bill });
  }
}

将项目推入空的 State 对象数组

Push items into empty State array of objects

javascript

arrays

reactjs

react-state-management