大量にstate定義するときに毎回useStateを使うと辛い

React javascript 技術

繰り返しけどReactでhooks使って書きたいよね

Reactのversionが16.8以降ならHooksを使って書くことができますね (2回目)

reactjs.org

useStateはいい

って話は昨日しました

https://zwzw.hatenablog.com/entry/2019/11/24/175427?_ga=2.153461688.1824511460.1574436130-1343269537.1554210727zwzw.hatenablog.com

ただ

stateをたくさん定義すると結構読みづらい、、

componentの中でたくさんstateを定義しようとすると行数増えるし見辛くなります 例えば

const [foo, setFoo] = useState('');
const [bar, setBar] = useState(0);
const [foobar, setFooBar] = useState(false);
const [hoge, setHoge] = useState(0);
const [fuga, setFuga] = useState('');
const [hogeHoge, setHogeHoge] = useState(true);
const [fugaFuga, setFugaFuga] = useState();

return (
    ...
    ...
    ...
)

お、おうってなりますよね

Objectにまとめて定義できるよ

そんな時はこうすると良さそう

const [states, setStates] = useState(
    {
        foo: '',
        bar: 0,
        foobar: false,
        hoge: 0,
        fuga: '',
        hogeHoge: true,
        fugaFuga: null
    }
)

const handleStateChange = event => {
        const {name, value} = event.target
        setValues({...states, [name]: value})
    }

みやすくなるのとhandlerを一つにまとめられるのがいいっすね