Question

我有一个React setState调用正在选择行为异常，但我不知道发生了什么。我想我已经将其缩小了一些-这是有问题的方法：

  setShowDeleteEventModal = (value) => {
    console.log('dude', value); //logs true
    this.setState(() => ({ showDeleteEventModal: value }), () => {
      console.log('hey', this.state); //logs state showing 'showDeleteEventModal: false'
    });
  };

到目前为止我所做的：

根据回调函数中出现的问题检查是否异步-并非如此，尽管我也使用setTimeout进行了检查；确保我正确声明了状态；检查我的变量的拼写，包括使用“查找”以确保它们全部以相同的拼写显示；检查值的类型（如果它是字符串）-它是一个布尔值；重写了整个实现。

所需的行为：setState调用后，showDeleteEventModal显示为true。实际行为：没有。

我从子组件中的按钮onClick调用此方法，但是由于'dude'和'true'出现在屏幕上，所以我知道它正在进入这里。 showDeleteEventModal是用于控制是否显示模式的开关。

令我最困惑的部分是，我在同一文件中有一个非常相似的设置，可以完美地工作。这是另一种方法：

setShowOnMap = (value) => {
  this.setState(() => ({ showOnMap: value }));
};

这是子组件的按钮调用，其中传递了prop：

<div className = "button background-red width15"
          onClick = {props.switchModals}
        >
          Remove this event
        </div>

switchModals = {
  () => {
    this.setShowDeleteEventModal(true);
    this.closeModal()
  }
}

整个文件需要一些时间在此处发布，但是希望这足够了，我只是想念一些愚蠢的东西。

Answer 1

setShowDeleteEventModal = (value) => {
  console.log('dude', value); //logs true
  this.setState({ showDeleteEventModal: value }, () => {
    console.log('hey', this.state); //logs state showing 'showDeleteEventModal: false'
  });
};

尝试删除箭头函数调用，对于第一个参数，就像上面一样，直接放入状态对象

反应setState调用不更新状态

1 个答案: