在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ react 在onClick事件 setState 后， 沒有立即渲染

react 在onClick事件 setState 后， 沒有立即渲染

下面的代碼要實現(xiàn)點擊 按鈕 就出現(xiàn) show 的內(nèi)容
結(jié)果要點第二次才會出現(xiàn)

然后 console.log
標記1 ：true
標記2 ：false

<Show/>組件里面有css animation 入場動畫
handleClick = () => {
  this.setState({
    show: true
  }, () => console.log('標記1', this.state.show));
  console.log('標記2', this.state.show);
}

render() {
  return (
    <div>
      <button onClick={this.handleClick}>出現(xiàn)</button>
      {
        this.state.show &&
        <div>
          <Show/>
        </div>
      }
    </div>
  )
}

剛學(xué)react不久，請問是什么原因呢

回答
編輯回答
近義詞

setState是異步的，如果你要在設(shè)置之后操作state，就在第二個參數(shù)回調(diào)函數(shù)內(nèi)操作
你目前放的代碼沒問題

2017年1月2日 21:22
編輯回答
懶洋洋

如果你要立即執(zhí)行就得，通過ref操控dom

handleClick = () => {
  console.log(this.box);
  this.box.style.display = 'block';
}

render() {
  return (
    <div>
      <button onClick={this.handleClick}>出現(xiàn)</button>
      <div style={{display:'none'}} ref={(node) => this.box = node}>
        <Show/>
      </div>
    </div>
  )
}
2018年2月17日 07:55
編輯回答
我不懂

無法重現(xiàn)你說的問題。但是，你的 render 函數(shù)是有問題的，沒有 return ，而且是多個節(jié)點。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>React</title>
<script crossorigin src="https://s.zys.me/js/react/react.js"></script>
<script crossorigin src="https://s.zys.me/js/react/react-dom.js"></script>
<script crossorigin src="https://s.zys.me/js/react/babel.min.js"></script>
</head>
<body>
  <div id="app"></div>
  <script type="text/babel">

    class A extends React.Component {
      constructor(props){
        super(props);
        this.state = {show: false};
      }

      handleClick = () => {
        this.setState({ show: true });
      }

      render() {
        return (
          <div>
            <button onClick={this.handleClick}>出現(xiàn)</button>
            { this.state.show && <div> show </div> }
          </div>
        )
      }
    }

    ReactDOM.render(<A />, document.getElementById('app'));
  </script>
</body>
</html>
2018年3月29日 04:23