在 componentDidMount() 之后停止渲染组件 [英] Stop rendering of a component after componentDidMount()

问题描述

我有一个包含三个组件的搜索页面.浏览主题组件列出了可供选择的主题.浏览文章组件根据主题 ID 列出所有文章，如果没有主题 ID，则加载所有文章.home组件持有browsetopics和browsearticles组件，并根据点击的主题改变其状态.

class BrowseTopics 扩展 React.Component {构造函数(道具){超级(道具)；this.topicSelect = this.topicSelect.bind(this);this.state = {error: "", 主题: []};}componentDidMount(){//使用主题列表更新状态主题的 API 调用}主题选择(id，e){e.preventDefault();this.props.topicChange(id);}使成为 () {//渲染来自 API 的主题列表，如果未发送请求则不渲染}}class BrowseArticles 扩展 React.Component {构造函数(道具){超级(道具)；this.state = {error: "", 文章: [], url: "/api/articles"};}componentDidMount() {如果(this.props.topicId){var url = '/api/topic/'+this.props.topicId+'/articles';this.setState({url: url});}//向 url 发出请求并获取文章}使成为 () {//渲染文章列表}}class Home 扩展 React.Component {构造函数(道具){超级(道具)；this.handleUpdate = this.handleUpdate.bind(this);this.state = {topicId: ""};}句柄更新(主题ID){this.setState({topicId: topicId});}使成为 () {返回(<div><BrowseTopics user={this.props.user} topicChange={this.handleUpdate}/><BrowseArticles user={this.props.user} topicId={this.state.topicId}/>

);}}

我需要的是，我希望 browseTopics 组件在父状态更改时停止重新渲染.我尝试使用 shouldComponentUpdate() (返回 false)，但它甚至停止了 componentDidMount() 部分并且未填充列表.

一旦向 API 发出请求并呈现组件，我希望停止对 browseTopics 的所有进一步重新呈现，以便排序正常运行.

解决方案

来自 文档:

<块引用>

如果 shouldComponentUpdate() 返回 false，则 componentWillUpdate()、render() 和 componentDidUpdate()> 不会被调用

我可能想设置某种标志，告诉我的 BrowseTopics 组件 API 请求已经发出，我不再需要/希望组件更新:

class BrowseTopics 扩展 React.Component {构造函数(道具){超级(道具)；this.topicSelect = this.topicSelect.bind(this);this.state = {错误: ""，话题: []，hasFetched: false//API 标志};}componentDidMount(){//使用主题列表更新状态主题的 API 调用获取('myapi.json').then( res => {//设置标志表示 API 结果已被获取this.setState({hasFetched: 真,主题:<你的主题>});})}shouldComponentUpdate(nextProps, nextState) {如果(this.state.hasFetched){返回假；}返回真；}...

I have a search page with three components. The browse topics component lists the topics to choose from. The browse articles component lists all the articles based on the topic ID and loads all articles if there is no topic id. The home component holds the browsetopics and browsearticles component, and changes its state according to the topic which is clicked.

class BrowseTopics extends React.Component {
  constructor(props) {
    super(props);
    this.topicSelect = this.topicSelect.bind(this);
    this.state = {error: "", topics: []};
  }
  componentDidMount(){
    // API call which updates state topics with the list of topics
  }
  topicSelect(id,e) {
    e.preventDefault();
    this.props.topicChange(id);
  }
 render () {
    // Rendering list of topics from API and nothing if request has not been sent
  }
}

class BrowseArticles extends React.Component {
  constructor(props) {
    super(props);
    this.state = {error: "", articles: [], url: "/api/articles"};
  }
  componentDidMount() {
    if(this.props.topicId){
    var url = '/api/topic/'+this.props.topicId+'/articles';
    this.setState({url: url});
    }
    // Make a request to url and get articles
  }
  render () {
    // Renders the list of articles
  }
}

class Home extends React.Component {
  constructor(props) {
    super(props);
    this.handleUpdate = this.handleUpdate.bind(this);
    this.state = {topicId: ""};
  }

  handleUpdate(topicId) {
    this.setState({topicId: topicId});
  }

  render () {

    return(
<div>
<BrowseTopics user={this.props.user} topicChange={this.handleUpdate}/>
          <BrowseArticles user={this.props.user} topicId={this.state.topicId}/>
</div>
      );
  }
}

What I need is, I want the browseTopics component to stop re-rendering on parent state change. I tried using shouldComponentUpdate() (which returns false) but that even stops the componentDidMount() part and the list isn't populated.

Once the request to API is made and component is rendered, I want all further re-rendering of browseTopics to stop for the sorting to function properly.

解决方案

From docs:

if shouldComponentUpdate() returns false, then componentWillUpdate(), render(), and componentDidUpdate() will not be invoked

I'd probably want to set some sort of flag telling my BrowseTopics component that the API request has been made and I no longer need/want the component to update:

class BrowseTopics extends React.Component {
  constructor(props) {
    super(props);
    this.topicSelect = this.topicSelect.bind(this);
    this.state = {
      error: "",
      topics: [],
      hasFetched: false // flag for API
    };
  }
  componentDidMount(){
    // API call which updates state topics with the list of topics
    fetch( 'myapi.json' )
      .then( res => {
        // set flag denoting API results have been fetcehd
        this.setState({
          hasFetched: true,
          topics: <your topics>
        });
      })
  }

  shouldComponentUpdate(nextProps, nextState) {
    if ( this.state.hasFetched ) {
      return false;
    }
    return true;
  }
  ...

这篇关于在 componentDidMount() 之后停止渲染组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！