去抖动 mobx-react 和 props

Question

我正在尝试消除方法调用的抖动：“chart.calculateChartData(props.answers)”。

我试过了： - 自动运行 - 反应 - 从反应库中使用去抖动。 - 在calculateChartData 中设置超时

每个解决方案都会导致更新周期或无法正常工作，因为 MobX 不是不可变的。

有人提示吗？

function QuantificationChart(props: QuantificationChartProps) {
    const {t} = useTranslation();

    const rootStore = useRootStore();
    const chart = rootStore.formulaStore.getChart<Chart>(Chart.chartName);
    const data = chart.calculateChartData(props.answers);

calculateChartData = (questionData: { [id: string]: number; } = {}) => {
        let chartData = [];
        for (let i = 0; i < this.numberOfYears + 1; ++i) {
            let customData = {...questionData, "year" : i};
            let chartEntry = {
                cost: this.rootStore.formulaStore.calculateFormula(this.cost.formula, customData),
                earn: this.rootStore.formulaStore.calculateFormula(this.earn.formula, customData),
                sum: 0
            };
            chartEntry.sum = (chartEntry.earn - chartEntry.cost) + (chartData[i - 1]?.sum || 0);
            chartData.push(chartEntry);
        }
        return chartData;
    };

提示：这是我使用 MobX 的第一个项目

Answer 1

找到了解决办法。似乎工作：

基于：https://mobx-react.js.org/recipes-effects

    const [data, setData] = React.useState(chart.calculateChartData(props.answers));

    React.useEffect(
        () =>
            autorun(() => {
                setData(chart.calculateChartData(props.answers));
            }, {delay: 1000}),
        [],
    );