ネスト(nest)した State の要素を setState で変更する（React）

解決する課題

Reactで値を保持する箇所といえばstate

setStateメソッドで、stateの値を変更できますが、
ネストされた要素は直接　setStateで変更できません　(React 16.2現在）

しかしながらstateでネストした要素を変更することがよくあります。

思ったより以上に情報が少ない為、

単純な解決方法を1つを記事にします

Typescriptを利用します。
Javascriptよりもコードはわかりやすく見えると思います。

---

結論 （コード用意しました）

どういうコードなの？

人間(humanDetail) の詳細に　名前、年齢、性別のプロパティを設けます

今回は　tom さんの年齢を　18 ⇒20に変更するというコードです。

//PlayGroundからコピペしたから、importは割と適当だよ
//importは適宜変更してね

import * as React from "react";
import { render } from "react-dom";
import { Button } from "antd";
import "antd/dist/antd.css";



interface humenDetail {
	name: string;
	age: number;
	sex: boolean; // true:men false:women
}

interface Props {}

interface State {
	human: humenDetail | null;
}

class App extends React.Component<Props, State> {
	constructor(props: Props) {
		super(props);

		this.state = {
			human: { name: "tom", age: 18, sex: true }
		};
	}

	nestedStateChange = () => {
		const item = this.state.human;
		if (item !== null) {
			item.age = 20; //ここに変更する値
		}

		this.setState({
			human: item
		});
		console.log(this.state.human);
	};

	render() {
		return (
			<div>
				<Button onClick={this.nestedStateChange}>
					ここを押すと、値が18⇒20に変わるよ
				</Button>
				<div>{this.state.human.age}</div>
			</div>
		);
	}
}

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

nestedStateChangeメソッドで ネストする前のプロパティを　itemとして指定して、itemのプロパティに値を入れて
item を　setStateするよーっていうオーソドックスなやり方です。