CODEWITHSUNDEEP
javascriptreactjs
akorn3000
akorn3000

Reputation: 309

Double rendering in React with asynchronous call in componentDidMount causing error

I'm building a blog application that has an articles index page, and from there you can click on an article to see the article or edit the article.

If you're going from the index page to the edit page, it works just fine because I already have all the articles in state. But if I refresh after I've gone to the edit-article page, I no longer have all the articles in state.

This is a problem because I'm making an asynchronous recieveSingleArticle call in the componentDidMount of my edit-article page, then I setState so my form is prepopulated. There's a double render which causes an "Uncaught TypeError: Cannot read property 'title' of undefined" error, presumably during the first render before the article has been received into state.

class ArticleEdit extends React.Component {
  constructor(props) {
    super(props);

    this.state = {title: "", body: "", imageFile: ""};

    this.handleChange = this.handleChange.bind(this);
    this.handlePublish = this.handlePublish.bind(this);
    this.handleFile = this.handleFile.bind(this);
    this.handleCancel = this.handleCancel.bind(this);
  }

  componentDidMount() {
    const { article, requestSingleArticle } = this.props;

    requestSingleArticle(this.props.match.params.articleID)
    .then(() => {
      this.setState({
        title: article.title,
        body: article.body,
        imageFile: article.imageFile
      });
    });
  }
...

I tried wrapping my async calls inside of an "if (this.props.article)" but that didn't work. Is there a best way of dealing with this type of problem? Any advice greatly appreciated!

UPDATE:

Another solution that works is to have a componentDidUpdate in addition to componentDidMount. check in componentDidMount if this.props.article exists and if so, setState. And in componentDidUpdate, wrap the setState in the following conditional:

if (!prevProps.article && this.props.article)

Upvotes: 0

Views: 445

Answers (1)

Prasanna
Prasanna

Reputation: 4636

Just check if the article is present in the props before calling async action

componentDidMount() {
  const { article, requestSingleArticle } = this.props;
  if (!(article && requestSingleArticle)) return; // this line
  requestSingleArticle(this.props.match.params.articleID)
  .then(() => {
    this.setState({
      title: article.title,
      body: article.body,
      imageFile: article.imageFile
    });
  });
}

Since you are not getting any render from this method , it means that the props are not yet obtained in the life cycle method componnetDidMount. So instead you can use componentWillReceiveProps like this

componentWillReceiveProps(nextProp) {
  // this line here will check the article props' status so that
  // we will not use setState each time we get a prop
  if (this.props.article === nextProp.article) return;

  // rest is just the same code from above
  const { article, requestSingleArticle } = nextProp;
  if (!(article && requestSingleArticle)) return; // this line
  requestSingleArticle(this.props.match.params.articleID)
  .then(() => {
    this.setState({
      title: article.title,
      body: article.body,
      imageFile: article.imageFile
    });
  });
}

Upvotes: 1

Related Questions