仅当 React 中的状态发生变化时才更改变量值

Question

我有下面的代码。如何重置 stocksHelper，当组件呈现在 stocks 的 useState 更改时再次实例化？

我需要这个 class 再次实例化以重置 class 实例中的变量，因为当股票发生变化时，需要进行计算以再次呈现股票。如果我用旧值得到最后一个渲染的实例，这个计算将会影响我的整个应用程序

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>
    );
}

Answer 1

如果我没理解错的话，你或许可以用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>
    );
}

Answer 2

@AmitMaraj 的回答非常好，但对于更短更简洁的方法，您应该使用 useMemo:

const stocksHelper = useMemo(() => new StocksHelper(stocks), [stocks]);

现在只有在 stocks 发生变化时才会创建新的 StocksHelper。

Pass a “create” function and an array of dependencies. useMemo will only recompute the memoized value when one of the dependencies has changed. This optimization helps to avoid expensive calculations on every render.

Link to documentation

仅当 React 中的状态发生变化时才更改变量值

Change variable value only when a state changes in React

typescript

reactjs

tsx

react-hooks

use-state