node.js - React组件不断更新

Question

我正在尝试将 markdown 文件转换为 html。我可以使用名为 showdown 的包来实现此目的，但 goToPage 组件会持续运行，如数百个控制台日志不断流动所示。

下面的代码允许用户在 url 中输入文件名，并且 Express 服务器返回一个 Markdown 文件。然后 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 中渲染另一个组件，并确保 fetch 仅运行一次。

<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 }} />
    );
  }
}