React-Native：无法将 state 中的数组大小设置为 state 中另一个数组的大小

Question

I have an array in my state called purchaseItems, whose values are currently hardcoded.

I have another array named priceArray that I initialized to be empty in the state, and I've been trying to modify it in componentDidMount() so that it has the length of the purchaseItems array and is filled with zeroes.

The way I've been trying to do is getting the length of purchaseItems, creating a duplicate of priceArray called newArray, using a for loop to push zeroes into newArray until it has the same length as purchaseItems, then appending newArray to priceArray via setState.

However, priceArray remains empty when I check it via console.log. Why might this be? I'll attach the code below.

Note: I'm planning to eventually populate purchaseItems from the DB, so the length of the purchaseItems array will not always be the same, so that's why I'm not hardcoding, say, an array full of zeroes with a length of 5 for priceArray if purchaseItems has a length of 5.

Code from my state:

  state = {};
  constructor(props) {
    super(props);
    this.state = {
      purchaseItems: [redacted],
      priceArray: [],
    };
  }

Code from my componentDidMount():

  componentDidMount() {
    console.log("Purchase Items: " + JSON.stringify(this.state.purchaseItems));
    const numItems = this.state.purchaseItems.length;
    console.log("numItems: " + numItems);
    var newArray = this.state.priceArray.slice();
    console.log("initialized newArray: " + JSON.stringify(newArray));
    var i;
    for (i = 0; i < numItems; i++) {
      newArray.push(0);
    }
    console.log("populated newArray: " + JSON.stringify(newArray));
    this.setState({ priceArray: [...this.state.priceArray, newArray] });
    console.log("priceArray: " + JSON.stringify(this.state.priceArray));
  }

Terminal:

Purchase Items: [redacted]
numItems: 6
initialized newArray: []
populated newArray: [0,0,0,0,0,0]
priceArray: []

Answer 1

set state of priceArray properly

this.setState({ priceArray: [...this.state.priceArray, ...newArray] },()=>console.log(his.state.priceArray));

You can also do the whole operation in one line

this.setState({priceArray:(new Array(this.state.purchaseItems.length)).fill(0))},()=>console.log(his.state.priceArray))