React组件未更新：调用setState后为何不触发重渲染？

核心问题出在getDerivedStateFromProps方法的逻辑上——它直接覆盖了你手动修改的state值，导致setState的更新无效。

具体原因 #

getDerivedStateFromProps是React的生命周期方法，每次组件渲染前都会触发，包括调用setState之后。你当前的实现里，这个方法无条件返回{ configurableOptions: props.configurable_options }，意味着不管你通过setState怎么修改configurableOptions，下一次渲染前都会被props里的原始值覆盖回去。相当于你的state更新操作完全被抵消了，组件自然不会因为预期的state变化重新渲染。

解决方案 #

修改getDerivedStateFromProps的逻辑，只有当props的configurable_options与当前state的configurableOptions不一致时，才更新state：

static getDerivedStateFromProps(props, state) {
    const { configurable_options } = props;
    // 仅在props值与state不同时返回更新对象
    if (JSON.stringify(configurable_options) !== JSON.stringify(state.configurableOptions)) {
        return {
            configurableOptions: configurable_options,
        };
    }
    // 无需更新时返回null
    return null;
}

注意：如果configurable_options是复杂嵌套对象，JSON.stringify的比较方式可能存在性能问题，你可以实现一个深比较函数，或者确保redux中更新该数据时返回全新的对象（保证引用变化）。

如果你的业务场景中，configurableOptions不需要从props同步，完全由组件内部state控制，也可以直接移除getDerivedStateFromProps方法，这样手动调用setState就能正常触发组件重新渲染。

内容的提问来源于stack exchange，提问作者Petro Chaikivskyi