クラス内に変更するオブジェクトの配列があり、キー押下が発生したときにのみ、このオブジェクトを視覚的にレンダリングします。
class Example extends React.Component {
constructor(props) {
super(props);
this.myArr = []; // this is an array of objects
}
render() {
return (
???
);
}
}
ここで、さまざまな方法でthis.myArrの内容を変更します。そして、(キープレスまたは他のイベントで)準備ができたときだけ、それをレンダリングしたいのです。
今、私のrender()に私はへの参照を持っている必要がありますthis.myArr そして、
this.forceUpdate()
を使用します再レンダリングを強制したいとき。
または、myArrを移動する必要がありますthis.state.myArr、およびメソッドでthis.state.myArrを変更し、それを表示する準備ができたら、render()リファレンスでthis.state.myArr、どういうわけか
this.setState(myArr: this.state.myArr);
で再レンダリングを強制する
どちらの方法でも機能しますが、配列を保持するためにthis.stateを使用し、keypressイベントコールバック内でthis.setState()を使用して再レンダリングを強制し、this.setStateを呼び出すことをお勧めします
配列値を更新する方法は次のとおりです- ReactJSの状態配列の正しい修正
Chrisが答えたthis.forceUpdate()の使用を避けるべき理由は非常に良い説明があります。
この場合、状態を使用する必要があります。状態は、コンポーネントの外観に影響するデータに使用することを目的としています。覚えているではないかもしれない 状態を直接変更します。これはアンチパターンです。代わりに、アレイのコピーを作成し、その変更されたコピーで状態を更新する必要があります。そのようです:
class Example extends React.Component { constructor(props) { super(props); this.state = {myArr: []}; // this is an array of objects } mutateArraySomehow() { const nextArr = [...this.state.myArr]; nextArr.push('heyyoooo'); this.setState({myArr: nextArr}); } render() { return ( ??? ); } }
これは私がそれをやったであろう方法です
class Example extends React.Component { constructor(props) { super(props); this.state = { myArr: [], display: false } } render() { if(this.state.display) { return ( <MyComponent onKeyPress=(ev=>{ this.setState({display: true}) }) /> ); } else { return (<div></div>) } } }
配列要素に変更がある場合、setStateをtrueに設定する必要があります。これにより、条件付きレンダリングが実行され、変更された配列が表示されます。
class Example extends React.Component { constructor(props) { super(props); this.state = { myArr = []; // this is an array of objects status:false } } modifyArr = () => { //some array modifications this.setState({status:true}) } render() { return ( {this.state.status ? null : (<div>`Display your array here`</div>)} ); } }
関連記事
- Reactコンポーネントは、オブジェクト内の1つのアイテムのみをレンダリングします
- オブジェクトがどのクラスから作成されたかを確認します
- クラスオブジェクトが機能しないリンクリストテンプレート
- React Jsのリンクを使用して、オブジェクトをあるページから別のページに渡します
- 反応関数コンポーネントのsetStateが状態を更新していません
- 削除された、またはユーザーが提供していないプライベートデストラクタを使用してクラスのオブジェクトを構築する(ただし、破棄しない)
- ネイティブハンドルのネストされたオブジェクトをマップとディスプレイで反応させる
- React useStateは、マージする代わりに状態オブジェクトを上書きします
- Reactフックの状態オブジェクト内にオブジェクトキーを設定する方法
- Reactでオブジェクトをレンダリングする
- Uberはスクロール矢印付きのタイプHorizontalScrollSpyを食べます
- Webpack DevServerが遅すぎますか、それとも何か問題がありますか?
- カスタムデータベースのクエリ(Mongodb)
- React-Redux:インポート試行エラー: '/ components/Score'にデフォルトのエクスポートが含まれていません( 'Score'としてインポートされました)
- divターゲットにアクセスして、reactでリストグループアイテムのスタイルを切り替える方法は?
- React Nativeエラー失敗したプロップタイプ:タイプ `array`の無効なプロップ` children`が `Overlay`に提供されました。
- svg要素の幅と高さを制御する方法
- 別のページにあるボタンの値を呼び出すにはどうすればよいですか?
- jsonから特定のコンテンツをレンダリングする
- JavaScriptを使用したスライドショーを使用したReactJSの画像モーダル
*** 2回目の更新-これはあなたが望むものだと思います。明らかに、マウスクリックイベントに対して多くのロジックを追加する必要があります。それは正しい方向にあなたを指す必要があります。