Question

当我在MyComponent中使用steState函数时，它什么都不做，在控制台中记录原始状态？

这是我的BaseComponent代码：

export class BaseComponent extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      foo: 'bar'
    }
    this.setMyState();
  }
  render() { return (<div></div>); }
}

这是扩展组件代码：

import { BaseComponent } from 'path/to/BaseComponent';

export class MyComponent extends BaseComponent {
  setMyState () {
    console.warn('MyComponent --->', this.state);  // Return {foo: bar}
    this.setState({ foo: 'koala' });
    console.warn('MyComponent --->', this.state);   // Return {foo: bar}
  }
}

我怎样才能让它发挥作用？

Answer 1

我认为你遇到的问题不是因为setMyState()没有正确修改你的状态，而是因为react this.setState()函数实际上是异步的，所以新的状态值不是保证在console.warn()时在下一行设置。

See this link for a more detailed explanation about the async nature of this.setState()

以下是React Docs的摘录，解释了它。

将setState（）视为请求而不是立即命令更新组件。为了获得更好的感知性能，React可能会延迟它，然后一次更新几个组件。应对并不保证立即应用状态变化。

如何在React中扩展另一个组件的组件中使用setState函数更改状态

1 个答案: