我正在尝试在从服务器请求新数据时显示叠加层 . 我正在使用setState回调，但覆盖似乎永远不会呈现 .

这是叠加组件：

export default class Overlay extends React.Component {

  render () {

    // This always prints out as expected
    console.log('overlay props', this.props)

    var overlayStyle = {///}
    return this.props.show ? (<div style={overlayStyle} id="PROBLEMCHILD"></div>) : null;
  }
}

这是主要的App组件：

export default class AppView extends React.Component {

  constructor(props){
    super(props)
    this.state = {
      ///
      isLoading: false,
    }
  }

  changeDay (dayTs) {
    ////
    // HERE'S THE THING. Triggered by a button elsewhere.
    ////
    this.setState({isLoading: true}, () => {
      var bodyElem = document.getElementById('body')
      ReactDOM.render(<AppView day={dayTs} />, bodyElem)
    })
  }

  render () {
    return (
            <div id="outer-container">
                {titleBar}
                {footerBar}         
            </div>
            <Overlay show={this.state.isLoading} />
    )
  }
}

单击日历按钮组件以触发AppView.changeDay（） . 当我注释掉changeDay的回调时，叠加层会立即显示 . 当我重新启用它时，Overlay状态确实发生了变化（console.log立即告诉我props.show为TRUE），但是即使我让ajax服务器休眠4秒，覆盖也不显示 .

这在某种程度上与在changeDay（）中重新呈现根AppView元素有关吗？根据我的阅读，重新渲染根组件以传递新的道具只是让它自己更新 .

Update: 使用Chrome检查器，我可以看到添加了元素IS . 由于某种原因它只是没有画到屏幕上 .

javascript reactjs