render()方法里面的span标签的{isHot}为什么只有初始化的时候显示为ture，再次点击一直不显示，理论上应该是ture和false交替显示，后台输出没有问题这是什么原因

我想要达到的结果

class Weather extends React.Component {
            constructor(props) {
                super(props);
                this.state = { isHot: 'ture' }
                console.log('ok');
              
            }
            render() {
                const {isHot} = this.state;
                console.log(isHot);
                return (<div>
                    <input type="text"></input>
                    <button onClick={this.changeWeather}>今天天气</button>
                    <span>{isHot}</span>;
                </div>)
            }
            changeWeather = () => {
                const { isHot } = this.state;
                this.setState({ isHot: !isHot });
            }
        }
        ReactDOM.render(<Weather name='tom' age={18} />, document.querySelector('.home'));