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

Question

In my React app build in Gatsby I have form with following fragment of code:

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

When the user click on the label, it's suppose to change class of inner div for .checked (change background color of inner div). It all works fine in all browsers except for Safari.

Here's my handleChangeRatio() method:

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

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

What's interesting is that state is changing as it should, but the class doesn't (background color of inner div remains the same). Maybe the problem is with re-rendering the component but then why it works fine in other browsers?

Thanks in advance.

Answer 1

I think you don't need to use the prevState , you can just switch between states: Try:

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