Реактивный компонент постоянно обновляется

Question

Я пытаюсь конвертировать файлы уценки в HTML. Я могу сделать это с помощью пакета, называемого showdown, но компонент goToPage постоянно работает, как это видно по сотням непрерывно текущих журналов консоли.

Приведенный ниже код позволяет пользователю вводить имя файла в URL иЭкспресс-сервер возвращает файл уценки. Затем React преобразует его в HTML и отображает этот HTML. Мне известно, что возвращаемый div пуст после первого запуска и зависит от состояния, обновляемого при получении данных, но я не знаю, как разорвать цикл после этого.

class App extends Component {
  state = { myFile: '' }

  constructor(props) {
    super(props);

    this.goToPage = this.goToPage.bind(this);
  }

  goToPage = ({ match }) => {
    fetch('/' + match.params.filename)
      .then((res) => res.text())
      .then((text) => {
        console.log(text);
        var fileContents = text;

        var showdown = require('showdown'),
          converter = new showdown.Converter(),
          markdown = fileContents,
          html = converter.makeHtml(markdown);

        console.log(html);
        this.setState({ myFile: html });
      })
      .catch(err => {
        console.log(err);
      });

    return (
      <div dangerouslySetInnerHTML={{ __html: this.state.myFile }} />
    )
  }

  render() {
    return (
      <Router>

        <Route path="/:filename" component={this.goToPage} />

      </Router >
    );
  }
}

export default App;

Я довольно новичок в React, поэтому я не знаю, должен ли мой goToPage быть в том же классе, все еще изучая основы. Я хотел бы знать, если я делаю что-то глупое.

Answer 1

<Route path="/:filename" component={this.goToPage} />

В этой строке маршрутизатор просит отобразить все, что находится в this.goToPage, в качестве компонента на указанном маршруте. Но если вы проверите функцию goToPage, она использует this.setState, которая перерисовывает браузер. Маршрут пытается снова выполнить функцию goToPage, и цикл повторяется.

Вместо этого вам нужно визуализировать другой компонент на маршруте /:filename и убедиться, что выборка выполняется только один раз.

<Route path="/:filename" component={MarkdownConverter} />

Теперь внутри MarkdownConverter компонента:

class MarkdownConverter extends Component {
  this.state = {
    myFile: ""
  }
  componentDidMount() {
    // All the logic for fetch and convert goes here.
  }
  render() {
    return (
      <div dangerouslySetInnerHTML={{ __html: this.state.myFile }} />
    );
  }
}