ボタンクリックで状態を設定しています。
すなわち this.setState('array', array);
最初の setState では、フロントエンド側に影響します。しかし、より多くの値を配列にプッシュして状態を再度設定しようとすると、状態とフロントエンドには影響しません。
setState を何度も繰り返してページを再度レンダリングする方法はありますか。
ボタンクリックで状態を設定しています。
すなわち this.setState('array', array);
最初の setState では、フロントエンド側に影響します。しかし、より多くの値を配列にプッシュして状態を再度設定しようとすると、状態とフロントエンドには影響しません。
setState を何度も繰り返してページを再度レンダリングする方法はありますか。
Marko Widgetsは、UI コンポーネントを再レンダリングする必要があるかどうかを判断するために、新しい状態と古い状態の浅い比較のみを行います。つまり、Marko Widgets は配列の詳細な比較を行って、新しい配列に新しい要素が含まれているか、別の要素が含まれているかを判断しません。UI コンポーネントの状態の一部であるすべてのプロパティに対して深い比較を行うには計算コストがかかりすぎるため、パフォーマンス上の理由から浅い比較が行われます。
解決策 1
推奨される戦略は、状態に追加されたオブジェクトを不変として扱うことです。つまり、古い配列を変更する代わりに、要素を追加して新しい配列を作成します。
悪い:
var myArray = this.state.myArray;
myArray.push('foo');
this.setState('myArray', myArray); // No change since myArray === this.state.myArray
良い:
var myArray = this.state.myArray;
myArray = myArray.concat('foo'); // myArray !== this.state.myArray
this.setState('myArray', myArray);
解決策 2
別のオプションはthis.setStateDirty('myArray')
、配列を変更した後に呼び出すことです。
var myArray = this.state.myArray;
myArray.push('foo');
this.setStateDirty('myArray'); // Mark the object as being modified
より詳しい情報: