Question

我有一个组件，我在componentDidMount函数中更新了状态。我收到了一个指示我这个页面的催眠警告：

https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-did-mount-set-state.md

它说

阻止在componentDidMount中使用setState（no-did-mount-set-state）

在组件装载后更新状态将触发第二次render（）调用，并可能导致属性/布局颠簸。

我应该在哪里更新我的州？

这是我的componentDidMount函数：

  componentDidMount(){
    this.interval = setInterval(() => {
      this.setState({
        frame: this.state.frame + 1
      });
    }, this.props.interval);
  }

这是我的渲染功能：

render(){
    let dots = this.state.frame % (this.props.dots + 1);
    let text = '';
    while(dots > 0){
      text += '.';
      dots--;
    }
    return <span {...this.props}>{text}&nbsp;</span>;
  }

我的构造函数：

   constructor(props, context){
    super(props, context);

    this.state = {frame: 1}; 
}

Answer 1

实际上，您没有使用setState，而是定义了使用setState的异步操作，我相信此规则是关于同步操作setState，所以如果你是确保首先渲染将在触发间隔之前，您可以在eslint配置中禁用此规则。

查看此帖子以及来自 @ljharb https://github.com/airbnb/javascript/issues/684#issuecomment-264094930

的评论

在componentDidMount中执行setState将导致可见的渲染闪烁。

但是，在进行服务器渲染时，任何需要浏览器环境的东西都必须放在componentDidMount中，因为它只运行于客户端，但是componentWillMount在客户端和服务器上运行。

我应该在哪里更新状态？

1 个答案: