react typescript 配列更新時 rerenderされない。
Q&A
Closed
解決したいこと
Reactのフレームワークでtypescriptを書いています。
配列Stateに値を追加して再renderしさせたいです。
Stateを更新すれば再renderしてくれると思っていたのですが、
なぜされないのかよくわかりません。
ボタンをクリックすると以下の処理が動き
rowsの配列Stateを更新します。
var [rows, setRowCount] = useState([1]);
function AddAmountDetails(): void{
rows.push(1);
setRowCount(rows);
--配列型でない値のStateを更新すると再renderしてくれるので一時的な対策として以下の処理を入れている。
count = rows.length;
setCount(count);
}
rowsの配列Stateの更新によって再renderの処理が動くと思ったのですが
動かなくて、どうすればrenderの処理が動くのですかね？
return (
<div className="App">
{rows.map((row,index) => (
<div>
<p>{row}</p>
</div>
))}
<input type="hidden" value={count}/>
</div>
);
全体のソースコードは以下の通りです。
import React,{ useState, useEffect } from 'react';
import './App.css';
function App() {
var [rows, setRowCount] = useState([1]);
var [count, setCount] = useState(1);
var registUsers :string[] = ["yoshi1","yoshi2","yoshi3"];
function AddAmountDetails(): void{
rows.push(1);
setRowCount(rows);
count = rows.length;
setCount(count);
}
function DeleteAmountDetails(): void {
if (rows.length > 1)
{
rows.pop();
setRowCount(rows);
count = rows.length;
setCount(count);
}
}
return (
<div className="App">
{rows.map((row,index) => (
<div>
<p>{row}</p>
</div>
))}
<input type="hidden" value={count}/>
</div>
);
}
export default App;
0