Javascript 在arrow函数中调用setState不改变状态？

在我的程序中，我必须在箭头函数中调用setState。函数应将IssummaryAccordinactive的状态设置为true，以便调用另一个函数。但是，当我在箭头函数中设置状态时，状态不会改变。它在控制台中仍然显示为false

下面是代码：

    class TabMenuButtons extends Component {
        constructor(props) {
            super(props);
            this.state = {
                rendersummaryAccordions: false,
                renderservicesAccordions: false,
                rendertravelAccordions: false, 
                renderratesAccordions: false, 


//These variables used for other components to detect which component is currently rendered ("Active")
                isSummaryAccordionActive: false, 
                isServicesAccordionActive: false, 
                isTravelAccordionActive: false, 
                isRatesAccordionActive: false, 

            };

        }




    //The Summary Button onClick calls this function to set the state of the summaryAccordionDetector variable
    setStateisSummaryAccordionsActive = () => {
        this.setState({isSummaryAccordionActive: true})
        this.callSummaryAccordionsLogicGate();
        //WHERE THE STATE IS READING AS FALSE IN THE CONSOLE*****
        console.log(this.state.isSummaryAccordionActive)
        console.log("setStateisSummaryAccordionsActive Was called")
    }

    //Then the function above  calls this function that checks if the summaryAccordionDetector variable is really true 
    callSummaryAccordionsLogicGate = () => {
        if (this.state.isSummaryAccordionActive) {
           this.summaryAccordionsLogicGate();

        }
        else {
            // this.setState({isSummaryAccordionActive: false})
            console.log("callSummaryAccordionsLogicGate found that the summary accordion wasn't active")
        }
    }

    //If the function above verifies that the summaryAccordionDetector is really true it calls this function which renders the summary accordion
       summaryAccordionsLogicGate = () => {
            this.setState({rendersummaryAccordions: true});
            console.log("summaryAccordionsLogicGate was called, render the summary accordion")
    } 

    //   servicesAccordionsLogicGate = () => {
    //     this.setState({renderservicesAccordions: true});
    //     console.log("servicesAccordionsLogicGate was called")

    //   } 

    //   ratesAccordionsLogicGate = () => {
    //     this.setState({renderratesAccordions: true});
    //     console.log("ratesAccordionsLogicGate was called")

    //   } 

    //   travelAccordionsLogicGate = () => {
    //     this.setState({rendertravelAccordions: true});
    //     console.log("travelAccordionsLogicGate was called")

    //   } 



        render() {

            let summaryAccordionPlaceHolder = null
            let servicesAccordionPlaceHolder = null
            let ratesAccordionPlaceHolder = null
            let travelAccordionPlaceHolder = null

            this.state.rendersummaryAccordions ? summaryAccordionPlaceHolder = <SummaryAccordions/> : summaryAccordionPlaceHolder = null;
            this.state.renderservicesAccordions ? servicesAccordionPlaceHolder = <ServicesAccordions/> : servicesAccordionPlaceHolder = null;
            this.state.renderratesAccordions  ? ratesAccordionPlaceHolder = <RatesAccordions/> : ratesAccordionPlaceHolder = null;
            this.state.rendertravelAccordions  ? travelAccordionPlaceHolder = <TravelAccordions/> : travelAccordionPlaceHolder = null;

            return (
                <div>
                    <center>
                        <table cellspacing="30px">
                            <tr>
                                <td>
                                <Button label="ITEM" icon="pi pi-home"  className="TabMenuButtons" onClick={this.setStateisSummaryAccordionsActive}   style={{marginRight:'.25em', borderRadius: '8%',  backgroundColor: "#1c479c" }}></Button>
                                </td>
                                <td>
                                <Button label="ITEM" icon="pi pi-users"  className="TabMenuButtons" onClick={this.servicesAccordionsLogicGate}    style={{marginRight:'.25em', borderRadius: '8%',  backgroundColor: "#1c479c"}}></Button>
                                </td>
                                <td>
                                <Button label="ITEM" icon="pi pi-cloud"  className="TabMenuButtons" onClick={this.travelAccordionsLogicGate}  style={{marginRight:'.25em', borderRadius: '8%',  backgroundColor: "#1c479c"}}></Button>
                                </td>
                                <td>
                                <Button label="ITEM" icon="pi pi-money-bill" className="TabMenuButtons" onClick={this.ratesAccordionsLogicGate}   style={{marginRight:'.25em', borderRadius: '8%', backgroundColor: "#1c479c"}}></Button>
                                </td>
                            </tr>
                        </table>
                    </center>
                     <tr>

                        {/* EDIT THIS to become dynamic */}
                        <td className="StaticTextBelowTabView"><h1>  ITEM: <em>$67,000.00 </em></h1> </td>
                        <td className="StaticTextBelowTabView"><h1> ITEM: <em>$5,000.00</em>  </h1></td>
                        <td className="StaticTextBelowTabView"><h1> ITEM: <em>$54,406.00</em> </h1></td>
                        <td className="StaticTextBelowTabView"><h1>  ITEM: <em>1,000</em> </h1></td>
                        <td className="StaticTextBelowTabView"><h1> ITEM: <em>20.00%</em></h1></td>
                    </tr>
                    {ratesAccordionPlaceHolder}
                    {servicesAccordionPlaceHolder}
                    {travelAccordionPlaceHolder}
                    {summaryAccordionPlaceHolder}
                </div>
            );
        }

    }

类选项卡按钮扩展组件{
建造师（道具）{
超级（道具）；
此.state={
RenderSummary手风琴：false，
RenderService记录：false，
RenderTravelaccordins:false，
渲染效果：错误，
//这些变量用于其他组件，以检测当前呈现的组件（“活动”）
IssummaryAccordinactive:false，
isServicesAccordionActive:错误，
IsTravelaccordiactive:错误，
IsratesCordioActive:错误，
};
}
//Summary按钮onClick调用此函数以设置summaryAccordionDetector变量的状态
setStateisSummaryAccordionsActive=（）=>{
this.setState（{IssummaryAccordinactive:true}）
此.callSummaryAccordationsLogicGate（）；
//其中，控制台中的状态读数为FALSE*****
console.log（this.state.issummaryAccordinactive）
log（“调用了setStateisSummaryAccordionsActive”）
}
//然后，上面的函数调用该函数，该函数检查summaryAccordionDetector变量是否为真
callSummaryAccordionsLogicGate=（）=>{
if（this.state.issummaryAccordinactive）{
这个.summaryAccordionsLogicGate（）；
}
否则{
//this.setState（{IssummaryAccordinactive:false}）
log（“CallSummaryAccordionLogicGate发现摘要手风琴未激活”）
}
}
//如果上面的函数验证summaryAccordionDetector是否真的为true，它将调用此函数来呈现SummaryAccordion
summaryAccordionsLogicGate=（）=>{
this.setState（{rendersummaryAccordions:true}）；
log（“调用SummaryAccordionLogicGate，呈现SummaryAccordion”）
} 
//服务协调逻辑门=（）=>{
//this.setState（{renderservicesaccordins:true}）；
//log（“调用了ServicesAccordionLogicGate”）
//   } 
//速率协调逻辑门=（）=>{
//this.setState（{renderRateAccordions:true}）；
//log（“调用RatesAccordionLogicGate”）
//   } 
//TravelAccordionLogicGate=（）=>{
//this.setState（{rendertravelaccordins:true}）；
//log（“调用TravelAccordionLogicGate”）
//   } 
render（）{
让summaryAccordionPlaceHolder=null
让servicesAccordionPlaceHolder=null
让ratesAccordionPlaceHolder=null
让travelAccordionPlaceHolder=null
this.state.rendersummaryAccordions？summaryAccordionPlaceHolder=：summaryAccordionPlaceHolder=null；
this.state.renderservicesAccordions？servicesAccordionPlaceHolder=：servicesAccordionPlaceHolder=null；
this.state.renderRateAccordions？ratesAccordionPlaceHolder=：ratesAccordionPlaceHolder=null；
this.state.renderTravelaccordins？travelAccordionPlaceHolder=：travelAccordionPlaceHolder=null；
返回(
{/*将其编辑为动态*/}
项目：$67000.00
项目：5000.00美元
项目：54406.00美元
项目：1000
项目：20.00%
{ratesAccordionPlaceHolder}
{servicesAccordionPlaceHolder}
{travelAccordionPlaceHolder}
{summaryAccordionPlaceHolder}
);
}
}

我是新手，我的逻辑有什么根本性的错误吗？

---

编辑：感谢大家的详细回复！我真的不知道这个州，直到你们都提到它。看起来我以后必须阅读API参考。

您需要了解的是，

这个.setState

是一个异步操作，它在稍后的时间间隔发生在后台，因此无法预测状态何时更新。这就是为什么在调用

callsummaryAccordionLogicGate

时，

isSummaryAccordionActive

的值仍然是

false

这是一个可能的解决方案

    setStateisSummaryAccordionsActive = () => {

      // Get the original value before setting the state
      const isSummaryAccordionActive=this.state.isSummaryAccordionActive;

      this.setState({isSummaryAccordionActive: true})

      // Pass the negation of the original value to the "callSummaryAccordionsLogicGate" function
      this.callSummaryAccordionsLogicGate(!isSummaryAccordionActive);

    }

    // Check with the parameter "isSummaryAccordionActive" which will have the correct value you expect
    callSummaryAccordionsLogicGate = (isSummaryAccordionActive) => {
      if (isSummaryAccordionActive) {
         this.summaryAccordionsLogicGate();

      }
      else {
          // this.setState({isSummaryAccordionActive: false})
          console.log("callSummaryAccordionsLogicGate found that the summary accordion wasn't active")
      }

---

您需要了解的是，

this.setState

是一个异步操作，它在稍后的时间间隔发生在后台，因此无法预测状态何时更新。这就是为什么在调用

callsummaryAccordionLogicGate

时，

isSummaryAccordionActive

的值仍然是

false

这是一个可能的解决方案

    setStateisSummaryAccordionsActive = () => {

      // Get the original value before setting the state
      const isSummaryAccordionActive=this.state.isSummaryAccordionActive;

      this.setState({isSummaryAccordionActive: true})

      // Pass the negation of the original value to the "callSummaryAccordionsLogicGate" function
      this.callSummaryAccordionsLogicGate(!isSummaryAccordionActive);

    }

    // Check with the parameter "isSummaryAccordionActive" which will have the correct value you expect
    callSummaryAccordionsLogicGate = (isSummaryAccordionActive) => {
      if (isSummaryAccordionActive) {
         this.summaryAccordionsLogicGate();

      }
      else {
          // this.setState({isSummaryAccordionActive: false})
          console.log("callSummaryAccordionsLogicGate found that the summary accordion wasn't active")
      }

---

我认为setState是异步的，因此紧接着的日志可能无法捕获状态更新。尝试使用状态在屏幕上呈现某些内容。@Dan是对的

setState