0

After installing ReactJS again after a few months not working with it, I noticed the latest version (16) is now using getDerivedStateFromProps and there is no more will receive props functions and stuff.

Currently I have my environment running with react-redux included. My new data gets into the mapStateToProps function of my container script, but I want to update the view accordingly. Basically a loading screen, and after the data is fetched via an API call, update the view with the API's response data. However, I don't seem to be able to find a solution to update my view anywhere up till now.

I noticed that the getDerivedStateFromProps only gets triggered once.

Am I missing some functions or anything? Short example:

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

import Files from '../components/files';

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

  componentDidMount() {
    this.props.getFilesByShare('sharename');
  }

  componentDidUpdate (prevProps) {
      console.warn('does not get here?');
  }

  render() {
    const { loading, files } = this.props;

    let content = (
      <div className="loading">Loading... Requesting file urls</div>
    );

    if (!loading && files && files.length) {
      content = (
        <div>
          File urls requested!
          <Files files={files} />
        </div>
      );
    }
    return (
      {content}
    );
  }
}

const mapStateToProps = state => {
  console.warn(state, 'this shows the new data');
  return {
    files: state.files,
    loading: state.files_loading,
  };
};

export default connect( mapStateToProps, { 
  getFilesByShare,
}) (ProjectContainer);
Miranda Breekweg
  • 207
  • 1
  • 2
  • 11

0 Answers0