时间戳

首页 > 解决方案 > 在 Safari 中状态更改后，React 组件不会重新呈现

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

问题描述

在我在 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 的背景颜色保持不变）。也许问题在于重新渲染组件，但为什么它在其他浏览器中运行良好？

提前致谢。

标签： javascriptreactjsiphonesafarigatsby

解决方案

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

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

推荐阅读