当前位置: 首页 > 知识库问答 >
问题:

setState意外更新非国家属性

彭成天
2023-03-14

我不知道这是一个已知的问题还是一个预期的特性,但我发现了一个有趣的问题。

constructor() {
  super();
  this.state = { counter: 0 }
  this.incrementButtonListener = (e) => {
    e.preventDefault();
    this.setState(prevState => ({ counter: prevState.counter + 1 }));
  };
}

render() {
  return (
    <div>
      <h1>{this.state.counter}</h1>
      // When clicked, counter increments by 1 and re-renders
      <button onChange={this.incrementButtonListener}>Increment</button> 
    </div>
  )
}
constructor() {
  super();
  this.counter = 0;
  this.incrementButtonListener = (e) => {
    e.preventDefault();
    this.counter++;
  };
}

render() {
  return (
    <div>
      <h1>{this.counter}</h1>
      // When clicked, counter increments by 1 but the difference is NOT rendered
      <button onChange={this.incrementButtonListener}>Increment</button> 
    </div>
  )
}

对吧?基本的东西。

然而,当我试图摆弄这段代码时,发生了一个有趣的情况。我们保持计数器作为一个字段属性和其他一切完整。唯一的区别是,在IncrementButtonListener中,我将在SomeStateProperty添加一个SetState:

constructor() {
  super();
  this.counter = 0;
  this.incrementButtonListener = (e) => {
    e.preventDefault();
    this.counter++;
    /*-------------------------------ADD THIS*/
    this.setState({});
    // You have to pass an object, even if it's empty. this.setState() won't work.
    /*-----------------------------------------*/
  };
}

render() {
  return (
    <div>
      <h1>{this.counter}</h1>
      // Surprise surprise, now this.counter will update as if it was in the state! 
      <button onChange={this.incrementButtonListener}>Increment</button> 
    </div>
  )
}

这一次,This.counter更新,就好像它处于状态一样!

共有1个答案

赵兴朝
2023-03-14

因为您没有截取状态的更改,所以它会导致重新呈现,而重新呈现又会导致使用您的增量实例属性。这是故意的。对React状态的任何更改都将导致组件重新呈现,除非您正在使用生命周期钩子来控制是否应该发生这种情况。

请参阅https://reactjs.org/docs/react-component.html#shouldcomponentupdate

 类似资料:
  • 我有一个带有Thymeleaf的Spring-boot Java应用程序。当根网页访问后,将从该控制器显示一个带有表单的页面。 表单如下所示。在填写表单并单击submit时。我希望前面创建的查询是从模型中传递的,即带有设置内容的请求映射器。但这似乎是一个不同的查询,因为它具有不同的内存地址。 我不确定我做错了什么。欢迎任何建议。 这个问题被标记为另一个问题的可能重复。我只是想确定一下这些问题是完全

  • 我正在尝试使用DidMount中的localStorage值更新状态,但它没有更新: 在第一个console.log中,我的值为1,在第二个中,它保持为空,不更新状态。

  • 每个国家都有一个特定的 ISO 3166代码 。 根据输入数据和用户的交互行为,在Gio地球表面的国家可以有以下几种状态: 1. 被选中的国家 当用户点击Gio地球表面某个国家的区域时,这个国家会以“被选中”的状态点亮。此时这个国家被称为"被选中的国家"。 可以通过 configure() API来设置被选中国家的颜色,具体设置方法如下所示: controller.configure({     

  • 所以我有这个: 只是一个数组的数字例如然而没有给出正确的总数,但?我甚至放了一个超时延迟,看看这是否解决了问题。任何明显的还是我应该发布更多的代码?

  • 通过start.spring.io创建了一个Spring应用程序,我试图运行该应用程序,但出现错误: org.springframework.context.应用程序上下文异常:无法启动Web服务器;嵌套异常java.lang.IllegalStateExctive: Temp目录'C:\WINDOWS\TEMP'不存在org.springframework.boot.web.servlet.co