Question

我正在开发一个控件，该控件可以将累积值更新到转发月份。

我更新状态的函数是在输入元素的“ onChange”事件上触发的。我的期望是，由于状态已发生变化，因此应立即触发重新渲染，但不会。

当我将焦点移到其他控件上或折叠GroupList时，就会发生重新渲染。

下面是我如何更新状态的代码。

public handlerUpdatedAmount(elementId: string, sourcePeriod: ICellDynamicsMeta) {

        let newItems: IRecords[] = this.updateMonthlyAndCumulativeItems(this.state.items, elementId, sourcePeriod);

        this.setState({ items: newItems });

        //this.forceUpdate(); //Tried this option as well, but it does not update as well.
    }

Answer 1

请参见以下两行代码：

...
let newItems: IRecords[] = this.updateMonthlyAndCumulativeItems(this.state.items, elementId, sourcePeriod);

this.setState({ items: newItems });
...

您正在将this.state.items作为参数传递给函数updateMonthlyAndCumulativeItems。您的代码中唯一可能的问题是，您正在updateMonthlyAndCumulativeItems函数中对状态进行突变，然后在下一行中设置相同的状态，因此有反应认为该状态未更改且从未重新渲染。

请勿将this.state.items作为参数传递。 updateMonthlyAndCumulativeItems函数已经可以访问该状态。还要确保不要直接改变状态。

Answer 2

您遇到了JavaScript数组的深克隆与浅克隆的问题。

基本上，数组上的useState跟踪对数组本身的引用，而不是对数组内容的引用。调用updateMonthly...()时，您可能会返回一个浅克隆的数组。

一个简单的解决方案是对数组进行解构并将其分配给setState中新数组的内容。像这样：

this.setState({ items: [...newItems]})

如果这不起作用，则可能是newItems中所填充内容的问题。您可以查看文档on how react decides when to re-render based on state change.

如何强制更新（重新渲染）React组件？

2 个答案: