React组件如何强制重渲染？localStorage更新后Viewer组件不生效

先拆解你代码里的核心问题，逐个解决：

1. 修复构造函数的错误 #

你在constructor里先调用this.setState，之后才初始化this.state，这是完全错误的写法。React组件的构造函数中不能用setState，应该直接赋值初始化state：

constructor(props) {
    super(props);
    this.state = {
        urn: localStorage.getItem('urn') || null,
    };
}

2. 处理setState的异步特性 #

setState是异步操作，你调用setState({urn: newUrn})后立刻访问this.state.urn，拿到的还是旧值。判断逻辑要改用刚从localStorage获取的新值：

componentDidMount() {
    setInterval(() => {
        const newUrn = localStorage.getItem('urn');
        if (this.state.urn !== newUrn) {
            this.setState({urn: newUrn});

            if (newUrn === "urn:null") {
                notify('请选择另一个模型', 'error', 1000);
            } else {
                notify('模型已切换', 'success', 1000);
            }
        }
    }, 2000);        
}

3. 为什么forceUpdate没用？ #

其实Test组件在setState后已经自动重渲染了，问题出在Viewer组件没有响应docUrn的props变化。你需要确保Viewer组件在docUrn更新时重新加载模型：

• 如果Viewer是类组件，在componentDidUpdate中对比前后props，触发模型重载：

componentDidUpdate(prevProps) {
    if (prevProps.docUrn !== this.props.docUrn) {
        // 这里写重新加载模型的逻辑，比如调用Viewer的加载方法
        this.loadModel(this.props.docUrn);
    }
}

• 如果Viewer是函数组件，用useEffect监听docUrn变化：

useEffect(() => {
    loadModel(docUrn);
}, [docUrn]);

4. 完全不需要forceUpdate #

React中除非极端场景，否则不要用forceUpdate。只要正确更新state，组件会自动重渲染，核心是让子组件（Viewer）能响应props的变化。

另外，长期轮询localStorage不是最优方案，建议在修改localStorage的地方触发自定义事件，Test组件监听该事件来更新state，比定时轮询更高效。

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