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

Question

在调试时，我确认状态正在改变，但单选按钮没有在视觉上更新。奇怪的交互：当我在状态更改后包含要执行的警报时，正确的单选按钮会成为活动选择，但一旦我退出警报，即使状态没有改变，它也会恢复。

  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

我不确定您是否在复制和粘贴代码时出错，您的类组件缺少其渲染功能。

除了您的代码似乎可以正常工作之外，这里是工作示例：

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

并且有相同组件的版本，但使用钩子而不是类：

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