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

【问题标题】：setState function in reactjs is not setting state. How to overcome this problem?reactjs 中的 setState 函数未设置状态。如何克服这个问题？
【发布时间】：2019-12-30 13:41:53
【问题描述】：

要打开引导模式，我正在设置状态 {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;

期待 isOpen 状态在点击更新状态时改变

【问题讨论】：

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

标签： javascript reactjs events

【解决方案1】：

正如 Yanis 所说，您记录错误。 setState 的第二个参数需要是一个回调函数，但是您会立即调用 console.log。而是这样做：

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

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

【讨论】：

如果我使用箭头函数值不会得到安慰，但如果我只是使用 console.log 值得到安慰
它唯一的记录是因为你最初调用 log 函数，在 setState 发生后它没有被记录。也尝试做：
这应该可以工作，并删除中的第二个绑定

【解决方案2】：

您可以在setState api 中使用之前的状态。

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

这里，state 代表之前的状态。

还请您从onClick 事件中删除额外的绑定。

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

【讨论】：

能否请您检查编辑后的答案。您需要从 onClick 事件中删除额外的绑定，因为您已经在构造函数中绑定了 onClickdialog。

【解决方案3】：

我认为您可能会以错误的方式检查它。这个 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))
  }

【讨论】：

我都用过，第一个控制台第二个在我使用箭头函数语法时不控制台
但是主要关心的是为什么状态没有更新？

【解决方案4】：

试试这个，

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

【讨论】：

老兄 this.setState 是异步任务，所以它会给你以前的状态，这就是为什么我使用 setState 提供的回调函数

【解决方案5】：

检查下面的函数，

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);
    });
  }

【讨论】：

【解决方案6】：

您的代码实际上可以尝试在您的模态中添加一些内容，如下所示：

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

然后试一试。另外我相信你没有导入 bootsrap 的 css 文件你应该导入它。

【讨论】：