Question

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

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

StoricoView使用getDerivedStateFromProps（），但还包含以下旧式生命周期： componentWillMount

应删除上述生命周期”）

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，消息将消失。实际上，componenentWillMount在React v16。*中已被弃用，并将在React v17中被删除。为了解释发生了什么，因为您使用componentWillMount和getDerivedStateFromProps来代替componentWillMount，所以React将更喜欢使用getDerivedStateFromProps，并且不会调用willMount方法，这就是您的api调用从未实现的原因

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

1 个答案: