bugfix> javascript > 投稿

クラス内に変更するオブジェクトの配列があり、キー押下が発生したときにのみ、このオブジェクトを視覚的にレンダリングします。

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); で再レンダリングを強制する

回答 5 件
  • *** 2回目の更新-これはあなたが望むものだと思います。明らかに、マウスクリックイベントに対して多くのロジックを追加する必要があります。それは正しい方向にあなたを指す必要があります。

    class Example extends React.Component {
      constructor(props) {
        super(props);
        this.myArr = [];
        this.state = {
          myArr: [{ width: 10 }, { width: 20 }], // header widths
        };
      }
      // call changeHeaders when needed
      // it will update state, which will cause a re-render
      changeHeaders = (column, newWidth) => {
        const newArr = [...this.state.myArr];
        if (newArr[column]) {
          newArr[column].width = newWidth;
        }
        this.setState({ myArr: newArr });
      }
      renderArray = () => {
        return this.state.myArr.map(({ width }) => <div>{width}</div>);
      }
      render() {
        return (
          <div>
            {this.renderArray()}
          </div>
        );
      }
    }
    
    

  • どちらの方法でも機能しますが、配列を保持するために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>)}
        );
      }
    }
    
    

あなたの答え