Question

我正在尝试学习一些有关使用jhipster生成应用程序的知识，我对spring boot有所了解，但是我从未使用过react，所以我的问题是我正在尝试制作一个用于显示产品的应用程序，一个简单的jdl：

File.Move

因此，我已经看到jhipster生成的所有内容，问题是我无法创建自己的组件，例如，在主页上我想显示产品列表，因此我在“我将模块命名为ecomerce / home，然后创建了两个文件：home.tsx和home.scss 我还创建了另外两个文件：ecomerce / components / listProduct.tsx和ecomerce / components / listProduct.scss

我的问题是我不知道如何调用我的组件

home.tsx：

entity product {
    title String,
    description String,
    price Number
}

listProducts.tsx

import React from 'react';
import { connect } from 'react-redux';
import { getSession } from 'app/shared/reducers/authentication';
import ListProduct from '../components/Listproduct';


export interface IHomeProp extends StateProps, DispatchProps {}

export class Home extends React.Component<IHomeProp> {
  render() {
    return (
      <div>
        <div className={'list-products'}>
           <ListProduct/> // here is the probleme my IDE suggest me 
                             <ListProduct location={} match={} history={}/>
        </div>
      </div>
    );
  }
}

const mapStateToProps = storeState => ({
  account: storeState.authentication.account,
  isAuthenticated: storeState.authentication.isAuthenticated
});

const mapDispatchToProps = { getSession };

type StateProps = ReturnType<typeof mapStateToProps>;
type DispatchProps = typeof mapDispatchToProps;

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Home);

我希望看到我的10种产品的清单，但是我有：

发生了意外错误。

TypeError：无法读取未定义的属性“搜索”

import React from 'react';
import { connect } from 'react-redux';
import { Link, RouteComponentProps } from 'react-router-dom';
import { Button, Col, Row, Table } from 'reactstrap';
import { Translate, ICrudGetAllAction, getSortState, IPaginationBaseState } from 'react-jhipster';

import { IRootState } from 'app/shared/reducers';
import { getEntities, reset } from './../../../../entities/product-a-6/product-a-6.reducer';
import { ITEMS_PER_PAGE } from 'app/shared/util/pagination.constants';

export interface IProductA6Props extends StateProps, DispatchProps, RouteComponentProps<{ url: string }> { }

export type IProductA6State = IPaginationBaseState;

export class ListProduct extends React.Component<IProductA6Props, IProductA6State> {
  state: IProductA6State = {
    ...getSortState(this.props.location, ITEMS_PER_PAGE)
  };

  componentDidMount() {
    this.reset();
  }

  componentDidUpdate() {
    if (this.props.updateSuccess) {
      this.reset();
    }
  }

  reset = () => {
    this.props.reset();
    this.setState({ activePage: 1 }, () => {
      this.getEntities();
    });
  };

  handleLoadMore = () => {
    if (window.pageYOffset > 0) {
      this.setState({ activePage: this.state.activePage + 1 }, () => this.getEntities());
    }
  };

  sort = prop => () => {
    this.setState(
      {
        order: this.state.order === 'asc' ? 'desc' : 'asc',
        sort: prop
      },
      () => {
        this.reset();
      }
    );
  };

  getEntities = () => {
    const { activePage, itemsPerPage, sort, order } = this.state;
    this.props.getEntities(activePage - 1, itemsPerPage, `${sort},${order}`);
  };

  render() {
    const { productList, match } = this.props;
    return (
      <div>
         {productList.map((product, i) => (
          <h1>title: { product.title }</h1>
        ))}
      </div>
    );
  }
}

const mapStateToProps = ({ product }: IRootState) => ({
  productList: product.entities,
  totalItems: product.totalItems,
  links: product.links,
  entity: product.entity,
  updateSuccess: product.updateSuccess
});

const mapDispatchToProps = {
  getEntities,
  reset
};

type StateProps = ReturnType<typeof mapStateToProps>;
type DispatchProps = typeof mapDispatchToProps;

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ListProduct);

如何基于Jhipster代码生成新组件

0 个答案: