Question

我需要从数据库加载文章，并将其设置为组件的状态。然后，该文章应显示在页面上。但是，当我尝试执行此操作时，会出现一个错误，即已加载的文章状态的值未定义。因此，我认为出现此问题是因为在组件的渲染之后调用了加载数据功能。如何在渲染并正确显示状态值之前调用此函数？

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

Answer 1

您应该使用componentWillMount

async componentWillMount() {
    const {onLoad} = this.props;

    // gets full list of articles
    try {
        const res = await axios('http://localhost:8080/api/articles');
        onLoad(res.data);
    } catch (e) {
        console.log(e, "error");
    }

}

Answer 2

您是doing nothing wrong。您只需要在呈现组件之前执行检查，就可以避免初始空值：

{ article && article.title }

或者，您也可以定义空值：

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

啊，@ gdh也指出，您正在在render钩子内进行函数调用。相反，您应该在componentDidMount挂钩内调用该函数。

Answer 3

您没有设置article的状态，因此似乎正在获取getArticles中的article的值。您还在渲染中调用getArticles，这将导致重新渲染，从而导致无限循环。

除了进行诸如{ article && article.title }之类的检查外，

因此，在componentDidMount中，执行提取后，调用getArticles函数。

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

    // gets full list of articles
    axios('http://localhost:8080/api/articles')
      .then((res) => {
       onLoad(res.data);
       // call getArticles here.
       getArticles() {
        // code ...
       }
      })
  }

在渲染之前调用React组件的函数

3 个答案: