ReactJS - 无限循环，setState onChange 方法

Question

我正在使用 codemirror 创建一个组件，但似乎我的代码中的某些内容是错误的，因为当我尝试更新我的主要组件的状态时，应用程序会破坏浏览器，我的研究指向一个无限循环，至少我可以看到当我正在尝试调试。

我希望你们中有人能帮助我解决这个问题，也许是我的错，谢谢。

我的主要组成部分：

import React, { Component, PropTypes } from 'react';
import Editor from '../editor';
import Preview from '../preview';

class Playground extends Component {

  constructor(props) {
    super(props);
    this.state = {
      code: 'Hi I am a component',
      newCode: ''
    };
    this.handleCodeChange = this.handleCodeChange.bind(this);
  }

  handleCodeChange(code) {
  // Everything works fine until this step, when the component wants to update the state, start the infinite loop
    this.setState({ newCode: code });
  }

  loadCode(code) {
    this.refs.editor.setCode(code);
  }

  render() {
    return (
      <div>
        <Editor
          ref='editor'
          codeText={this.state.code}
          onChange={this.handleCodeChange}
        />
        <Preview code={this.state.newCode} />
      </div>
    );
  }
}

Playground.propTypes = {
  component: PropTypes.string
};

export default Playground;

我的编辑器组件：

import React, { Component, PropTypes } from 'react';
import style from './style';
import CodeMirror from 'codemirror';
import 'codemirror/mode/javascript/javascript';

class Editor extends Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  componentDidMount() {
    this.editor = CodeMirror.fromTextArea(this.refs.editor, {
      lineNumbers: this.props.lineNumbers,
      matchBrackets: true,
      mode: 'javascript',
      readOnly: this.props.readOnly,
      smartIndent: false,
      tabSize: this.props.tabSize,
      theme: this.props.theme
    });

    this.editor.on('change', this.handleChange);
  }

  componentDidUpdate() {
    if ( !this.props.readOnly ) {
      this.editor.setValue(this.props.codeText);
    }
  }

  handleChange() {
    if ( !this.props.readOnly && this.props.onChange ) {
      this.props.onChange(this.editor.getValue());
    }
  }

  render() {
    let _className = style.editor;
    return (
      <div className={ _className }>
        <textarea ref="editor" defaultValue={this.props.codeText} />
      </div>
    );
  }
}

Editor.propTypes = {
  className: React.PropTypes.string,
  codeText: PropTypes.string,
  lineNumbers: PropTypes.bool,
  onChange: PropTypes.func,
  readOnly: PropTypes.bool,
  tabSize: PropTypes.number,
  theme: PropTypes.string
};

Editor.defaultProps = {
  className: '',
  lineNumbers: false,
  readOnly: false,
  tabSize: 2,
  theme: 'one-dark'
};

export default Editor;

我的预览组件

import React, { Component, PropTypes } from 'react';

class Preview extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>{this.props.code}</div>
    );
  }
}

Preview.propTypes = {
  code: PropTypes.string
};

export default Preview;

如果您需要更多信息或其他信息，请告诉我。

提前致谢。

解决方案

我从编辑器组件中删除了这个片段

componentDidUpdate() {
  if ( !this.props.readOnly ) {
    this.editor.setValue(this.props.codeText);
  }
}

原因是因为这个方法给编辑器设置了一个新的值，意味着更新，然后这个过程无限地重新开始，如果你手动加载编辑器的内容可以使用这个方法，那不是我的情况。

谢谢安东尼

Answer 1

存在无限循环，因为this.handleChange当 CodeMirror 实例发生更改时，您会调用编辑器组件。当您此时调用this.handleChange时，您会更新主组件的状态。

然后，当您更新主组件状态时，它会调用componentDidUpdate编辑器组件的功能。您设置 CodeMirror 实例的值，该实例触发change事件、更新主要组件状态等。

为避免这种行为，只需比较codeTextincomponentDidUpdate并handleChange仅在必要时更新。