Safari 中的状态更改后，React 组件不会重新渲染

Question

在我在 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>

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

这是我的handleChangeRatio()方法：

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

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

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

提前致谢。

Answer 1

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

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