Q&A
実現したいこと
- TypeScript & Reactでstateの値を更新する。
前提
お世話になっております。現在Typescript勉強中です。
以下のinputを更新した際にstateの値を更新する処理を実装したいと考えています。
実装したコードでわからない点があったのでご教授いただけないでしょうか?
発生している問題・エラーメッセージ
このコードで// XXX
の記載がある処理がよくわかりません。
testStateの値を更新する場合、setTestState
を呼び出す必要があると認識していましたが、直接testStateに値を代入しても意図通りの挙動になっているように思います。なぜ意図通りの動きをするのか教えていただけないでしょうか?
該当のソースコード
typescript
1function Test () { 2 let [testState, setTestState] = useState([ 3 { 4 name: "test1" 5 }, 6 { 7 name: "test2", 8 } 9 ]); 10 11 return ( 12 <div> 13 <input 14 type="text" 15 defaultValue={testState[0].name} 16 id='input0' 17 onChange={(event) => { 18 // setTestStateを呼び出して値を更新 19 let tmp = testState; 20 tmp[0].name = event.target.value; 21 setTestState(tmp) 22 }} 23 /> 24 <input 25 type="text" 26 defaultValue={testState[1].name} 27 id='input1' 28 onChange={(event) => { 29 // XXX: setTestStateを呼ばなくても値の更新ができる??? 30 testState[1].name = event.target.value 31 }} 32 /> 33 <input type='button' onClick={() => { 34 console.log(testState) 35 }} value="testbutton" /> 36 </div> 37 ) 38}
試したこと
補足情報(FW/ツールのバージョンなど)
回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2023/02/05 10:48
退会済みユーザー
2023/02/05 10:57