how to display a list of items in react from a db

Question

I'm trying to display a list of item from a database, but only those with the Id of the account I'm logged in the application.

I tried to import a previous state with the account and use the id in the api to get only those items, then i use componentWillMount to render the page with the items i selected from the database. I get that i can't use static getDerivedStateFromProps and componentWillMount ("Warning: Unsafe legacy lifecycles will not be called for components using new component APIs.

StoricoView uses getDerivedStateFromProps() but also contains the following legacy lifecycles: componentWillMount

The above lifecycles should be removed")

import React, { Component } from "react";
import axios from "axios";
import StoricoItems from "./Storicoitems";
import { styles } from "./styles.scss";
import { Form, Label, Input } from "components/Form";
import * as accountActionCreators from "core/actions/actions- account";
import * as contractActionCreators from "core/actions/actions-contract";
import * as assetActionCreators from "core/actions/actions-asset";
import { requestAccountAccess } from "core/libs/lib-metamask-helper";
import { withRouter } from "react-router-dom";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import { bindActionCreators } from "redux";

class StoricoView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      allowToProceed: false,
      email: "",
      receiverCode: "",
      initialDate: "",
      expireDate: "",
      rights: "",
      codiceReferto: null,
      nextBtnDisabled: true,
      id: "",
      storico: []
    };
  }

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

    requestAccountAccess(defaultAccount => {
      actions.account.setDefaultAccount(defaultAccount);
      actions.contract.setContract(defaultAccount);
    });
  }

  static getDerivedStateFromProps(prevState) {
    const { account } = prevState;
    return { id: account.id };
  }

  componentWillMount() {
    this.mostraStorico(this.state.id);
  }

  mostraStorico(id) {
    axios.get("http://localhost:8080/api/assegna_consensos/" + id);
    then(response => {
      console.log(response.data);
      this.setState({ storico: response.data }, () => {
        console.log(this.state);
      });
    }).catch(err => console.log(err));
  }

  render() {
    const storicoItems = this.state.storico.map((storico, i) => {
      return <StoricoItems key={storico.public_key} item={storico} />;
    });
    return (
      <div>
        <h1>Storico</h1>
        <ul className="container">{storicoItems}</ul>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    account: state.account,
    asset: state.asset
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: {
      account: bindActionCreators(accountActionCreators, dispatch),
      contract: bindActionCreators(contractActionCreators, dispatch)
    }
  };
}

StoricoView.propTypes = {
  account: PropTypes.shape({
    email: PropTypes.string,
    receiverCode: PropTypes.string,
    initialDate: PropTypes.date,
    expireDate: PropTypes.date,
    rights: PropTypes.string,
    codiceReferto: PropTypes.string,
    id: PropTypes.string
  }).isRequired,
  actions: PropTypes.shape({}).isRequired,
  asset: PropTypes.shape({}),
  history: PropTypes.shape({}).isRequired
};

StoricoView.defaultProps = {
  asset: null
};

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

While StoricoItems is :

import React, { Component } from "react";
import { Link } from "react-router-dom";

class StoricoItem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      products: props.products
    };
  }

  render() {
    return (
      <li className="registration-form">
        <ul className="container">
          <li className="registration-form">
            Proprietario : {this.state.products.giver}
          </li>
        </ul>
        <ul className="container">
          <li className="registration-form">
            Beneficiario : {this.state.products.receiver}
          </li>
        </ul>
        <ul className="container">
          <li className="registration-form">
            Data inizio consenso : {this.state.item.data_inizio}
          </li>
        </ul>
        <ul className="container">
          <li className="registration-form">
            Data Fine Consenso : {this.state.item.data_fine}
          </li>
        </ul>
        <ul className="container">
          <li className="registration-form">
            {" "}
            Tipo consenso : {this.state.item.diritti}
          </li>
        </ul>
        <ul className="container">
          <li className="registration-form">
            Referto :{this.state.item.referto}
          </li>
        </ul>
        <br />
        <br />
      </li>
    );
  }
}
export default StoricoItem;

Of course i'm doing it wrong but what?

Answer 1

First thing you shouldn't call API from componentWillMount and instead move the call to componentDidMount (it's better to wait for the component to be mounted before making api call). Then you can remove componentWillMount and the message will disappear. Indeed componenentWillMount is depracated in React v16.* and will be removed in React v17. To explain what happened, since you use componentWillMount and getDerivedStateFromProps which is a replacement for componentWillMount React will prefer use getDerivedStateFromProps and won't call willMount method that's why your api call were never made