为什么组件 state 更新但视觉效果没有更新？

Question

While debugging I confirmed the state is changing but the radio buttons aren't updating visually. Weird interaction: When I include an alert to be executed after the state has been changed, the correct radio button becomes the active selection but as soon as I exit the alert it reverts back even though the state hadn't changed.

  constructor(props) {

        super(props);

        this.state = {
            algorithmType: 'A*'
        }

    }

    radioUpdated = (event) => {

        this.setState({algorithmType: event.currentTarget.value});

    }


    <form>
        <input type='radio' 
        id='PathFinding_RadioButton_Dijkstras'
        name='algorithm' 
        value='Dijkstras'
        checked={this.state.algorithmType == 'Dijkstras' && true}
        onChange={this.radioUpdated}></input>
        <label for="Dijkstras">Dijkstra's</label><br></br>

        <input type='radio'
        id='PathFinding_RadioButton_A*' 
        name='algorithm' 
        value='A*'
        checked={this.state.algorithmType == 'A*'}
        onChange={this.radioUpdated}></input>
        <label for='A*'>A*</label><br></br>

        <input type='radio' 
        id='PathFinding_RadioButton_D*'
        name='algorithm' 
        value='D*' 
        onChange={this.radioUpdated}
        checked={this.state.algorithmType == 'D*'}
        ></input>
        <label for='D*'>D*</label>
     </form>

Answer 1

I'm not sure if you made a mistake in copying and pasting the code, your class component is missing its render function.

Apart from that your code seems to work fine, here is working example:

https://codesandbox.io/s/mystifying-gagarin-dh6nz?file=/src/App.js

And there is version of the same component, but using hooks instead of a class:

https://codesandbox.io/s/nostalgic-dew-bhy7n?file=/src/App.js