反应客户端componentDidMount不能正常工作（服务器端渲染）

Question

Hello Stackoverflow community

sorry in advance if my explanation is not clear enough

when a user types a url directly. the server makes a request, fetch the corresponding data and renders to screen. and this works perfectly

when a user clicks on a link, the page is suppose to switch and render new component and fetch corresponding data from server via componentDidMount and save to state but for some reason the data does not appear on page

when i run the code below, console.log('2') comes before console.log('1') meaning that state is first rendered undefined before populated with fetched data

it looks like a async problem but i dont know my way around it and this should not be the case because it works on normal client side applications

but even though the order of events is distorted the app should re-render when state change which does not happen.

News.js

import React from 'react';
import NewsList from './newslist';
import 'es6-promise'
import 'isomorphic-fetch';

class News extends React.Component {
  constructor(props){
    super(props)

    let initialData;

    if(props.staticContext){
      initialData = props.staticContext.initialData

    } else if (typeof window !== 'undefined') {
      initialData = window.__initialData__
      delete window.__initialData__
    }

    this.state = {news: initialData }
  }

  componentDidMount() {
    News.requestInitialData().then(data => {
      console.log('1 ' + data)                           <------- console log 1
    return this.setState({ news: data })
    });
    console.log('2 ' + this.state)                       <------- console log 2
  }

  static requestInitialData() {
    return fetch('http://localhost:3000/api/data')
    .then(response => response.json())
    .catch(err => console.log(err))
  }

  render() {
    return (
      <div className="App">
        <NewsList news={this.state.news} />
      </div>
    );
  }
}

module.exports = News

NewsList.js

import React, { Component } from "react";

export default class NewsList extends Component {
  constructor(props){
    super(props)

    // const data = (this.props.news) ? this.props.news : '';
    this.state = {news : this.props.news,
                  sortOrder: 'ascending'}
  }

  sortOrder(order, event) {
    event.preventDefault();
    const data = Object.assign([], this.state.news)
    let data2;

    if (order === 'ascending') {
      data.sort( (a,b) => a.id - b.id )
      data2 = 'ascending'
    }
    else if (order === 'descending') {
      data.sort( (a,b) => b.id - a.id )
      data2 = 'descending'
    }

    this.setState({ 
      news: data,
      sortOrder: data2
    });
  }

  render() {
    const news = this.state.news

    return (
      <div>
        <div className="sort">
            <a
              href="#"
              className={"ascending"}
              onClick={this.sortOrder.bind(this, "ascending")}>
              Ascending
            </a>|
            <a
              href="#"
              className={"descending"}
              onClick={this.sortOrder.bind(this, "descending")}>
              Date
            </a>
          </div>


        {news && news.map(post =>
          <div key={post.id} className="news-item">
              <p>
                <span className="news-position">{post.id}. ▲</span> {post.title}{" "}
                <small>(by {post.author})</small>
              </p>
              <small className="news-details">
                {post.upvotes} upvotes
              </small>
          </div>
        )}
      </div>
    );
  }
}

thanks in advance for your help

Answer 1

You code looks fine. The following is happening:

In componentDidMount you request initial data. This is async operation meaning that componentDidMount will finish without waiting for it to complete and console.log('2 ' + this.state) will be executed, and after that initial render will be called without any data present.

Then requestInitialData gets completed and you see console.log('1 ' + data) logged. After that you update state (note that setState is also async) and News gets rendered again with data.

The reason for ui not being updated could be that NewsList implement shouldComponentUpdate and do not re-render itself upon some conditions.

I would suggest put logging inside render methods for both News and NewsList and see how they get called. And that you do fetch data from requestInitialData method.