Reactを使用してコンポーネント状態の配列を適切に更新する

Question

私は、配列を使用してコンポーネントの状態をよりよく扱う方法を学び、理解しています。ここで私は、私は、この親コンポーネントの後半でレンダリングコンポーネントを生成するためのコンポーネントのcomponentWillMount()に呼び出す関数は次のとおりです。

generateThings =() => { 
    let newThings = []; 
    for (let j = 0; j < this.state.numberOfThings; j++) { 
     const pos = this.generatePosition(1, 1); 
     const thingComp = <Thing key={j} position={pos} />; 
     newThings.push(thingComp); 
    } 
    this.setState({ 
     things: newThings 
    }); 
    }; 

私はより良い方法は、直接、状態フィールド（this.state.things.push(thingComp);）へpush()の代わりになるだろうと思いましたtemp変数に格納するのが面倒です。しかし、それはUIアップデートを引き起こすようには見えないので、私はこれをやる方法だと思っていますが、わかりません。

Answer 1

あなたがしていることは正しいです。

あなたがsetStateを呼び出す

は、それが再度レンダリングするコンポーネントが発生します。 React Docs

SETSTATE（）によるとコンポーネントの状態への変更をエンキューし、このコンポーネントとその子は再レンダリングする必要があること に反応伝えます の状態を更新しました

この状態を突然変更しないでください。setState（）を呼び出した後に の突然変異を置き換えてください。それが 不変であるかのようにthis.stateを扱います。

既存thingsアレイへ/プッシュを更新する必要がある場合：あなたがしたい場合

let things = this.state.things.slice(); // make a copy 

//push or do whatever to the array 
things.push(thingComp) 

this.setState({ things: newThings }); 

Answer 2

はまた、あなたが別の配列にプッシュし、スライスせずに状態を設定することができます。

CodeSandbox：https://codesandbox.io/s/jn8w8w34n3

the additional array solution is commented