Question

我正在尝试在从服务器请求新数据时显示叠加层。我正在使用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元素有关？根据我的阅读，重新渲染根组件以传递新的道具只是让它自己更新。

更新：使用Chrome检查器，我可以看到正在添加元素IS。它只是因为某种原因没有画到屏幕上。

Answer 1

这对我有用...

 this.setState({
     ...
 }, ()=>{
     this.forceUpdate(()=>{
         ...
     })
 })

不确定这是怎么做到的

React setState（）在回调之前不呈现

1 个答案: