Javascript reactjs中的setState函数未设置状态。如何克服这个问题？

要打开引导模式，我将设置状态{isOpen:true}，但setState不会更新状态

我使用了async/await和setTimeout，但没有任何效果。在我的另一个组件中打开了相同的模式

import React from 'react';
import Dialog from 'react-bootstrap-dialog'
import { Button } from 'react-bootstrap'
import { Modal } from 'react-bootstrap'

class EventComponent extends React.Component {
    constructor(props) {
      super(props);
     this.state = {
      isOpen: false
    };
    this.onClickdialog = this.onClickdialog.bind(this);
    this.toggleModal = this.toggleModal.bind(this);
  }

  toggleModal = () => {
    console.log('open', this.state.isOpen)
    this.setState({ isOpen: !this.state.isOpen }, console.log('open', 
    this.state.isOpen));
  }

  onClickdialog() {
    debugger
    this.toggleModal();
    // this.dialog.show('Hello Dialog!')
  }
  renderEvent(event) {
    const eventType = event.EventType;
    const name = event.Name;
    const isApproved = event.IsApproved === 1 ? 'approved' : 'unapproved';
    switch (eventType) {
      case 'Birthday': return (<div className='birthday' title={eventType}>
        <i className="fas fa-birthday-cake" ></i>&nbsp;{name}
      </div>);
      case 'Full Day': return (<div className={`fullday ${isApproved}`} title= 
       {eventType}>
        <i className="fas fa-umbrella-beach"></i>&nbsp;{name}&nbsp;
       <i style={{ marginTop: '-2px', position: 'absolute' }} >
          <a onClick={this.onClickdialog.bind(this)} style={{ fontWeight: 
       'bold' }}>...</a></i>
      </div>);
      default: return (<div>{eventType}:&nbsp;{name}</div>);
    }
  }
  render() {
    return (
      <div>
        {this.renderEvent(this.props.event)}
        <Modal className={"override-fade"} show={this.state.isOpen}
          onClose={this.toggleModal}>
        </Modal>
      </div>
    )
   }
  }
  export default EventComponent;

从“React”导入React；
从“反应引导对话框”导入对话框
从“react bootstrap”导入{Button}
从“react bootstrap”导入{Modal}
类EventComponent扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
伊索彭：错
};
this.onClickdialog=this.onClickdialog.bind（this）；
this.toggleModal=this.toggleModal.bind（this）；
}
toggleModal=（）=>{
console.log（'open'，this.state.isOpen）
this.setState（{isOpen:！this.state.isOpen}，console.log（'open'，
这个.state.isOpen）；
}
onClickdialog（）{
调试器
this.toggleModal（）；
//this.dialog.show（'Hello dialog！'）
}
渲染（事件）{
const eventType=event.eventType；
const name=event.name；
const isApproved=event.isApproved==1？“已批准”：“未批准”；
开关（事件类型）{
案例“生日”：返回(
{name}
);
案例“全天”：返回(
{name}
...
);
默认值：返回（{eventType}:{name}）；
}
}
render（）{
返回(
{this.renderEvent（this.props.event）}
)
}
}
导出默认事件组件；

---

希望在单击更新状态时更改isOpen状态，我想您可能会错误地检查它。这个console.log适合你吗

this.setState({ isOpen: !this.state.isOpen }, console.log('open', 
    this.state.isOpen))

我想你应该试试这样的东西

this.setState(
  { isOpen: !this.state.isOpen },
  () => {
    console.log('open', this.state.isOpen))
  }

---

我想你可能检查错了。这个console.log适合你吗

this.setState({ isOpen: !this.state.isOpen }, console.log('open', 
    this.state.isOpen))

我想你应该试试这样的东西

this.setState(
  { isOpen: !this.state.isOpen },
  () => {
    console.log('open', this.state.isOpen))
  }

---

正如Yanis所说，你把它记错了。setState的第二个参数需要是回调函数，但您需要立即调用console.log。相反，你应该：

this.setState({ isOpen: !this.state.isOpen }, () => console.log(...))

---

顺便说一句，您不必绑定使用箭头函数定义的类属性，正如Yanis所说，您的日志记录是错误的。setState的第二个参数需要是回调函数，但您需要立即调用console.log。相反，你应该：

this.setState({ isOpen: !this.state.isOpen }, () => console.log(...))

顺便说一句，您不必绑定使用箭头函数定义的类属性

toggleModal = () => {
     console.log('open', this.state.isOpen)
     this.setState({ isOpen: !this.state.isOpen });
     console.log(this.state.isopen);}

试试这个

toggleModal = () => {
     console.log('open', this.state.isOpen)
     this.setState({ isOpen: !this.state.isOpen });
     console.log(this.state.isopen);}

检查以下功能

toggleModal = () => {
    const { isOpen } = this.state;
    console.log('before ', isOpen);
    this.setState((prevState) => {
      // prevState before updating state
      console.log('before changing state', prevState.isOpen);
      return {
        isOpen: !prevState.isOpen,
      };
    }, () => {
      // callback after setting state
      const { isOpen: afterIsOpen } = this.state;
      console.log('after update ', afterIsOpen);
    });
  }

检查以下功能

toggleModal = () => {
    const { isOpen } = this.state;
    console.log('before ', isOpen);
    this.setState((prevState) => {
      // prevState before updating state
      console.log('before changing state', prevState.isOpen);
      return {
        isOpen: !prevState.isOpen,
      };
    }, () => {
      // callback after setting state
      const { isOpen: afterIsOpen } = this.state;
      console.log('after update ', afterIsOpen);
    });
  }

---

您的代码实际上可以工作，请尝试在模式中添加如下内容：

return (
   <div>
     {this.renderEvent(this.props.event)}
     <Modal className={"override-fade"} show={this.state.isOpen}
      onClose={this.toggleModal}>
       <h1>test</h1>
     </Modal>
   </div>
)

返回(
{this.renderEvent（this.props.event）}
测试
)

然后试一试。另外，我相信您没有导入bootsrap的css文件

---

您应该导入它。

您的代码实际上可以工作。请尝试在模式中添加如下内容：

return (
   <div>
     {this.renderEvent(this.props.event)}
     <Modal className={"override-fade"} show={this.state.isOpen}
      onClose={this.toggleModal}>
       <h1>test</h1>
     </Modal>
   </div>
)

返回(
{this.renderEvent（this.props.event）}
测试
)

然后试一试。另外，我相信您没有导入bootsrap的css文件

---

您应该导入它。

您可以在

setState

api中使用以前的状态

toggleModal = () => {
    this.setState((state) => ({
        isOpen: !state.isOpen
    }))
}

这里，state表示以前的状态

另外，请您删除

onClick

事件中的额外绑定

<a onClick={this.onClickdialog} style={{ fontWeight: 'bold' }}>...</a>

。。。

您可以在

setState

api中使用以前的状态

toggleModal = () => {
    this.setState((state) => ({
        isOpen: !state.isOpen
    }))
}

这里，state表示以前的状态

另外，请您删除

onClick

事件中的额外绑定

<a onClick={this.onClickdialog} style={{ fontWeight: 'bold' }}>...</a>

。。。

我两个都用过，第一个控制台在我使用箭头函数syntax时第二个不控制台，但主要问题是为什么状态没有更新？我两个都用过，第一个控制台在我使用箭头函数syntax时第二个不控制台，但主要问题是为什么状态没有更新？Dude this.setState是异步任务，它会给你以前的状态，这就是为什么我使用setStateDude提供的回调函数this.setState是异步任务，所以它会给你以前的状态，这就是为什么我使用setState提供的回调函数调试器被触发了吗？所以调用了

toggleModal

方法？那么它应该可以工作了。调试器被触发了吗？所以调用了

toggleModal

方法？如果我使用的是箭头函数，那么它应该可以工作。如果我使用的是console函数，那么value不会得到console，但是如果我只是使用console.log value得到consoledIts只会得到logged，因为您最初调用的是log函数，那么在setState发生后它不会被记录。还可以尝试这样做：这应该会起作用，并删除if I use arrow函数中的第二个绑定。如果我只是使用console.log value get consoledIts only getting logged，则该函数值不会得到控制，因为您最初调用的是log函数，在setState发生后不会被记录。同时尝试这样做：这应该会起作用，并删除can-you-please中的第二个绑定以检查编辑的答案。其中，您需要从

onClick

事件中删除额外绑定，因为您已经在构造函数中绑定了

onClickdialog

。请检查编辑的答案。其中，您需要从

onClick

事件中删除额外的绑定，因为您已经在构造函数中绑定了

onClickdialog

。