react 特定のstateを変更したい

Question

reactでstateを変更したいのですが
うまくできないので教えてください。

this.state = {
  index: 0,
  count: [
    { test: 1, hoge: 2 }
  ],
}

このstateのhogeを100に変えたいのですが

this.state({ this.count[0].hoge: 100 });

とやったのですがうまく行きません。
どうすれば変更できますか？

Answer 1

ネストされたstateの更新は結構面倒臭いです。

以下、質問内容通り、配列の最初のアイテムを更新するという決め打ちコードではありますが、
実際は、指定された配列のindexに対するアイテムを更新するみたいに汎用性を高めたコードにする必要があるかと思います。また、配列内のオブジェクトの中にさらに配列やオブジェクトがあった場合、ちゃんと更新対象のアイテムをディープコピーしてあげる必要が出てくるので、さらに面倒臭くなります。その場合は、ディープコピーを簡単にしてくれるライブラリを使ってあげると良いと思います。

サンプルコード

import React from 'react';
import { render } from 'react-dom';

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      counts: [
        { test:1, hoge: 2},
        { test: 15, hoge: 25 }
      ]
    }
  }

  handleButtonClick() {

    this.setState((prevState) => {

      // const updatedCount = Object.assign({}, prevState.counts[0], test: 100});
      const updatedCount = { ...prevState.counts[0], test: 100 };

      const updatedCounts = [updatedCount, ...prevState.counts.slice(1)]

      return {
        counts: updatedCounts
      }

    });

  }

  render() {
    return (
      <div>
        {this.state.counts[0].test}
        <button onClick={this.handleButtonClick.bind(this)}>click</button>
      </div>
    )
  }

}

render(<App />, document.getElementById('root'));

https://codesandbox.io/s/4826klkk4

簡単にポイント

1. this.setStateメソッドは非同期実行される為、this.setStateメソッドの中でthis.stateを参照したいような場合は、上記掲載コードのようにthis.setStateメソッドが取る第一引数に渡ってくるpreviousStateを参照して、そちらを利用する
2. 今回のようにネストが深く、更新対象が配列の中にあるアイテムやオブジェクトである場合は、そのコピーを作ってから、更新をする。reactでstateを直接書き換えてしまうのはNGであるため。

Answer 2

まずreactではsetStateを呼ばないとstateの変更ができないかと思います。
その上で、reactではstateを直接変更することができないので、だいぶ面倒くさいですが下記の用になるかと思います。

this.setState({
  count: [
    {
      test: this.state.count[0].test,
      hoge: 100
    }
  ],
});

変更できるにはどうすれば良いかという質問にはこのような回答になります。