如何显示来自数据库的反应项目列表

Question

我正在尝试显示数据库中的项目列表，但仅显示那些具有我在应用程序中登录的帐户 ID 的项目。

我尝试使用帐户导入以前的状态并使用 api 中的 id 来仅获取这些项目，然后我使用 componentWillMount 来呈现包含我从数据库中选择的项目的页面。我知道我不能使用静态 getDerivedStateFromProps 和 componentWillMount（“警告：使用新组件 API 的组件不会调用不安全的遗留生命周期。

StoricoView 使用 getDerivedStateFromProps() 但还包含以下遗留生命周期： 组件WillMount

上面的生命周期应该被删除")

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

虽然 StoricoItems 是：

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;

当然我做错了，但是什么？

Answer 1

首先，您不应从 componentWillMount 调用 API，而是将调用移至 componentDidMount (it's better to wait for the component to be mounted before making api call)。 然后您可以删除 componentWillMount 并且该消息将消失。实际上 componentWillMount 在 React v16.* 中已弃用，并将在 React v17 中删除。 为了解释发生了什么，由于您使用 componentWillMount 和 getDerivedStateFromProps 来替代 componentWillMount React 将更喜欢使用 getDerivedStateFromProps 并且不会调用 willMount 方法，这就是您的 api 调用从未进行过的原因