如何呈现此pnp.sp.web.lists函数的结果，以及如何将其连接到数据模型？

Question

我的表单是一个带有提交按钮的简单两个文本字段。我想在与控件相同的Webpart中显示一个SharePoint列表。我不知道如何在渲染中显示pnp.sp.web.lists包装函数的输出。我还想将我的数据模型IFeedbackItems.ts连接到该函数。

我可以使列表出现在控制台中，但是我对这种语言的基本了解使得我无法在渲染器中显示该列表。我确定它可能是一个.map ???

这是数据模型：

export interface IFeedbackItem {
    Id: string;
    Title: string;
    JobTitle: string;
}

这是tsx文件：

import * as React from 'react';
import styles from './Tomtrain.module.scss';
import { ITomtrainProps } from './ITomtrainProps';
import { escape } from '@microsoft/sp-lodash-subset';
import {DefaultButton, personaPresenceSize} from 'office-ui-fabric-react';
import { TextField } from 'office-ui-fabric-react/lib/TextField';
import { ITomTrainState } from './ITomtrainState';
import {IFeedbackItem} from "./IFeedbackItems";
import * as pnp from 'sp-pnp-js';  

export default class Tomtrain extends React.Component<ITomtrainProps, ITomTrainState> {
  constructor(props) {
    super(props);
    this.state = {
      Items: [],
      Id: '',
      Title: '',
      JobTitle: ''
    };
    this._onSubmit = this._onSubmit.bind(this);
    this._onTitleChange = this._onTitleChange.bind(this);
    this._onJobTitleChange = this._onJobTitleChange.bind(this);
    this._onNew = this._onNew.bind(this);

  }
  public render(): React.ReactElement<ITomtrainProps> {
    return (
      <div className={ styles.tomtrain }>
        <div className={ styles.container }>
          <div className={ styles.row }>
            {this.props.description}
            <div className={ styles.column }>
              <TextField
              label="Name"
              value={this.state.Title}
              onChange={this._onTitleChange}
              />
              <span></span>
              <TextField
              label="JobTitle"
              value={this.state.JobTitle}
              onChange={this._onJobTitleChange}
              />
              <DefaultButton
              disabled={false}
              checked={true}
              text="Submit"
              onClick={this._onSubmit}
              />
              <div>
              <DefaultButton
              disabled={false}
              checked={true}
              text="Reveal List"
              onClick={this._getListItems}
              />
              <div>
                {this._getListItems.map(items)} //not finished
              </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
  private _onSubmit() {
    alert('A Form was submitted with this data:' + this.state.JobTitle);
  }
//The below function could be reused for each text field. But for now it only operates for the Title field.
  private _onTitleChange = (ev: React.FormEvent<HTMLInputElement>, newValue?: string) => {
    if(newValue && newValue.length > 255) {
      this.setState({ Title : newValue.substr(0, 255)});
    } else {
      this.setState({ Title : newValue || ''});
    }
  }

  private _onJobTitleChange = (ev: React.FormEvent<HTMLInputElement>, newValue?: string) => {
    this.setState({
      JobTitle: newValue
    });
  }
  private _onNew(){
    this.setState({

     Title: '',
     JobTitle: ''
    });
  }
  //This wrapper uses page or site context to figure out where the Feedback list is. If it didn't, it wouldn't know where to
  //to find feedback.
  public _getListItems() {
    pnp.sp.web.lists.getByTitle("Feedback").items.get().then((items: any[]) =>{
     console.log(items);
    });
  }

}

我希望显示我正在调用的列表，并希望数据模型与_getListItems函数一起使用。