在 Safari 中状态更改后，React 组件不会重新呈现

Posted 2023-02-21

【中文标题】在 Safari 中状态更改后，React 组件不会重新呈现

【英文标题】：React component doesn't rerender after state change in Safari

【发布时间】：2021-01-12 17:50:26

【问题描述】：

在我在 Gatsby 中构建的 React 应用程序中，我的表单包含以下代码片段：

<label id="politykaModal" onClick=e => this.handleChangeRatio(e)>
     <button id="politykaModal" name="polityka-prywatnosci" className=this.state.politykaModalError ? "redBorder" : "">
           <div id="politykaModal" className=this.state.politykaModal ? "checked" : ""/>
     </button>
     Accept privacy policy
</label>

当用户点击标签时，假设为.checked更改内部div的类（更改内部div的背景颜色）。它在除 Safari 之外的所有浏览器中都能正常工作。

这是我的handleChangeRatio() 方法：

handleChangeRatio(e) 
        e.preventDefault();
        let name = e.target.id;

        if(name === "politykaModal") 
            this.setState((prevState) => 
                return (
                    politykaModal: !prevState.politykaModal
                );
            );
        
    

有趣的是，状态正在发生应有的变化，但类没有变化（内部 div 的背景颜色保持不变）。也许问题在于重新渲染组件，但为什么它在其他浏览器中运行良好？

提前致谢。

【参考方案1】：

我认为您不需要使用prevState，您可以在状态之间切换：尝试：

    if(name === "politykaModal") 
        this.setState(politykaModal: !this.state.politykalModal)