ReactでクラスオブジェクトをsetStateする方法は？

*** 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>)}
    );
  }
}