时间戳

首页 > 解决方案 > React 组件不断更新

node.js - React 组件不断更新

问题描述

我正在尝试将降价文件转换为 html。我可以使用一个名为 showdown 的包来做到这一点，但是 goToPage 组件会持续运行，正如数百个控制台日志不断流动所看到的那样。

下面的代码允许用户在 url 中输入文件名，快速服务器返回一个 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 是否应该在同一个班级——仍在学习基础知识。我很想知道我是否在做一些愚蠢的事情。

标签： node.jsreactjsexpress

解决方案

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

推荐阅读