Javascript 调用React组件&x27；s函数在其呈现之前

我需要从DB加载文章，并将其设置为组件的状态。那么这篇文章应该显示在页面上。但当我尝试这样做时，出现了一个错误，即加载的项目的状态值未定义。因此，我认为出现问题是因为加载数据函数是在组件渲染之后调用的。如何在渲染之前调用此函数并正确显示状态值

import React from 'react';
import axios from 'axios';  
import { connect } from 'react-redux';
import { withRouter } from "react-router";

class ArticlePage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      article: null,
    }
  }

  componentDidMount() {
    const { onLoad } = this.props;

    // gets full list of articles
    axios('http://localhost:8080/api/articles')
      .then((res) => onLoad(res.data))
  }

  getArticle() {
    // gets current article
    // ...
  }

  render() {

    this.getArticle();
    const { article } = this.state;

    return (
      <div>
      <h1>
        {article.title}
      </h1>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  articles: state.home.articles,
});

const mapDispatchToProps = dispatch => ({
  onLoad: data => dispatch({ type: 'HOME_PAGE_LOADED', data }),
  onDelete: id => dispatch({ type: 'DELETE_ARTICLE', id }),
  setEdit: article => dispatch({ type: 'SET_EDIT', article }),
});

export default connect(mapStateToProps, mapDispatchToProps)(withRouter(ArticlePage));

从“React”导入React；
从“axios”导入axios；
从'react redux'导入{connect}；
从“react router”导入{withRouter}；
类ArticlePage扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
第条：无效，
}
}
componentDidMount（）{
const{onLoad}=this.props；
//获取文章的完整列表
axios（'http://localhost:8080/api/articles')
.然后（（res）=>onLoad（res.data））
}
getArticle（）{
//获取当前文章
// ...
}
render（）{
这个.getArticle（）；
const{article}=this.state；
返回(
{文章标题}
);
}
}
常量mapStateToProps=状态=>({
文章：state.home.articles，
});
const mapDispatchToProps=调度=>({
onLoad:data=>dispatch（{type:'HOME\u PAGE\u LOADED'，data}），
onDelete:id=>dispatch（{type:'DELETE_ARTICLE'，id}），
setEdit:article=>dispatch（{type:'SET_EDIT'，article}），
});
导出默认连接（mapStateToProps、mapDispatchToProps）（withRouter（ArticlePage））；

您应该使用

你应该使用

你真是太棒了。渲染组件之前只需执行检查，以避免初始空值：

{ article && article.title }

或者，也可以定义空值：

this.state = {
  article: {
    title: ''
  }
}

啊，@gdh也指出了这一点，您正在渲染钩子内进行函数调用。相反，您应该在

组件didmount

钩子中调用该函数。

您需要。渲染组件之前只需执行检查，以避免初始空值：

{ article && article.title }

或者，也可以定义空值：

this.state = {
  article: {
    title: ''
  }
}

---

啊，@gdh也指出了这一点，您正在渲染钩子内进行函数调用。相反，您应该在

组件didmount

钩子中调用该函数。

您没有为

文章

设置状态，因此您似乎在获取getArticles中的

文章

的值。您还在render中调用

getArticles

，这将导致重新渲染，从而导致无限循环

除了进行检查，如

{article&&article.title}

因此，在componentDidMount中，在提取之后调用

getArticles

函数

componentDidMount（）{
const{onLoad}=this.props；
//获取文章的完整列表
axios（'http://localhost:8080/api/articles')
。然后（（res）=>{
onLoad（res.data）；
//在这里调用getArticles。
getArticles（）{
//代码。。。
}
})
}

您没有设置

文章的状态

，因此您似乎在获取getArticles中

文章的值。您还在render中调用
getArticles
，这将导致重新渲染，从而导致无限循环

除了进行检查，如
{article&&article.title}

因此，在componentDidMount中，在提取之后调用
getArticles
函数

componentDidMount（）{
const{onLoad}=this.props；
//获取文章的完整列表
axios（'http://localhost:8080/api/articles')
。然后（（res）=>{
onLoad（res.data）；
//在这里调用getArticles。
getArticles（）{
//代码。。。
}
})
}
在render get console.log（this.props非状态）中，检查render get console.log（this.props非状态）中是否存在数据，并检查数据是否存在