即使第一個函數調用第二個函數，函數也不按正確順序觸發

Question

我的目的是使用存儲在狀態中的布爾值來更新下拉菜單以顯示或保持隱藏狀態。 我編寫了兩個函數，'toggleHander'（由click事件觸發），它切換布爾狀態，然后調用下一個函數 - 'dropdownClickHandler'。 'dropdownClickHandler'根據狀態保持的布爾狀態添加'show'css類（或不），從而更新下拉菜單。

我的問題（我認為）第二個函數（'dropdownClickHandler'）在第一個函數（'toggleHandler'）之前調用 - 即使'toggleHandler'由click事件直接觸發，並且只應在setState之后調用第二個函數完成。 這導致用戶需要在下拉顯示之前單擊兩次（而不是一次）。

我不確定這是否與提升或setState的異步性質有關？ 或許還有其他什么？

任何幫助贊賞

僅供參考 - 我嘗試將初始布爾狀態更改為true並且菜單有效。 我只是不明白函數調用的順序

Codepen： https ：//codepen.io/kiron/pen/vwERzP

懷疑違規代碼：

toggleHandler = () => {
  this.setState(
    {addClass: !this.state.addClass},
    () => console.log('in toggle', this.state),                             
      this.dropdownClickHandler()
  ); 
}


dropdownClickHandler = () => {
  console.log('in drop', this.state);
  this.state.addClass === true ? boxClass = ["dropdownContent", "dropdownContent__show"] : boxClass = ["dropdownContent"]
}   

Answer 1

正確的語法：

toggleHandler = () => {
  this.setState(
    {addClass: !this.state.addClass},
    () => {
      console.log('in toggle', this.state),                             
      this.dropdownClickHandler()
    }
  ); 
}

但是（如評論中所述） dropdownClickHandler()將無法正常工作......

......根本不需要它（基本的條件渲染）：

render() {
  const boxClass = this.state.addClass ? "dropdownContent dropdownContent__show" : "dropdownContent"

  return (
    <div className={boxClass} >

甚至更簡單

render() {
  return (
    <div className={"dropdownContent "+ this.state.addClass && "dropdownContent__show"} >