我有下面的代碼。如何重置stockHelper，當組件渲染股票的useState 更改時再次實體化？
我需要這個類再次實體化以重置類實體中的變數，因為當股票發生變化時，需要進行計算以再次渲染股票。如果我用舊值獲得最后一次渲染的實體，這個計算會破壞我的整個應用程式
export default function Heatmap() {
const [stocks, setStocks] = useState<IStock[]>([]);
const stocksHelper: StocksHelper = new StocksHelper(stocks);
return (
<main className={styles.main}>
<RegisterForm stocks={stocks} setStocks={setStocks} />
</main>
);
}
RegisterForm 組件如下：
export default function RegisterForm(props: Props) {
const { stocks, setStocks } = props;
const [name, setName] = useState<string>('');
const [value, setValue] = useState<number>(0);
const [volume, setVolume] = useState<number>(0);
function storeStock(): void {
axios.post('any url', {
name: name,
value: value,
volume: volume
})
.then((res) => {
setStocks([...stocks, res.data]);
})
.catch((res) => console.log(res));
}
return (
<form className={styles.form} onSubmit={() => storeStock()}>
<fieldset>
<legend className={styles.title}>Cadastro</legend>
<input type="text" onChange={e => setName(e.target.value)} placeholder="Nome" />
<input type="number" onChange={e => setValue(parseFloat(e.target.value))} placeholder="Porcentagem" />
<input type="number" onChange={e => setVolume(parseInt(e.target.value))} placeholder="Volume" />
<button type='submit'>Cadastrar</button>
</fieldset>
</form>
);
}
uj5u.com熱心網友回復：
@AmitMaraj 的答案非常好，但是對于更短更簡潔的方法，您應該使用useMemo：
const stocksHelper = useMemo(() => new StocksHelper(stocks), [stocks]);
現在只有在更改時才會創建新的 StocksHelper stocks。
傳遞一個“create”函式和一個依賴陣列。useMemo 只會在依賴項之一發生更改時重新計算記憶值。這種優化有助于避免在每次渲染時進行昂貴的計算。
鏈接到檔案
uj5u.com熱心網友回復：
如果我理解正確，您也許可以使用 useEffect 來實作這一點！請參閱下面的示例：
export default function Heatmap() {
const [stocks, setStocks] = useState<IStock[]>([]);
const [stocksHelper, setStockHelper] = useState<StocksHelper>(new StocksHelper(stocks));
useEffect(() => {
setStockHelper(new StocksHelper(stocks))
}, [stocks])
return (
<main className={styles.main}>
<RegisterForm stocks={stocks} setStocks={setStocks} />
</main>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/466986.html