Typescript React - Обновление массива с использованием формы и PnPjs

Question

Я создаю веб-приложение SharePoint. У меня есть около 100 продуктов. Каждый продукт имеет около 30 элементов, которые включают название, описание, изображения, рейтинги и т. Д. c. Для приведенного ниже примера я показываю только заголовок и описание, чтобы минимизировать код.

Цель состоит в том, чтобы, когда администратор перешел на mysite.com/product/12 или mysite.com/product/64, я хочу создать форму, в которой они могут обновлять некоторые значения. для этого массива. Например, они могут редактировать описание. Вот три пункта, с которыми мне нужна помощь.

1. В настоящее время я фильтрую массив, чтобы получить элемент по id, используя this.props.match.params.id, а затем сохраняю этот новый массив в UserList. В моем render у меня в поле формы есть value={this.state.UserList.ProductTitle}, однако это ничего не отображает. Как получить содержимое этого элемента для отображения в значении поля.

2. Если какое-либо из полей формы было изменено, я хочу сохранить это значение для обновления массива при отправке.

3. При отправке формы _onProductUpdate с использованием функции Pnp js update(), найденной здесь . Я хочу обновить этот элемент списка с любыми изменениями.

Вот где я сейчас.

import * as React from 'react';
import { default as pnp, sp} from "sp-pnp-js";

export class Product extends React.Component<{match: any}, {
    UserList: any,
    ProductTitle: string,
    ProductDescription: string, 
}> {

    constructor(props) {
        super(props);
        this.state = {
            UserList: [],
            ProductTitle: '',
            ProductDescription: '',
        };

    }

    handleChangeProductTitle(event) {
        const { value } = event.target;
        this.setState({ ProductTitle: value }); 
    }

    handleChangeProductDescription(event) {
        const { value } = event.target;
        this.setState({ ProductDescription: value }); 
    }       

    public componentDidMount() {

        pnp.sp.web.lists.getByTitle("Products").items.filter("Id eq '" + this.props.match.params.id + "'").top(1).get().then((items: any[]) => {
            console.log(items); 

            const UserList = items.map((item) => {

                return {
                    id: item.ID, 
                    ProductTitle: item.Title,
                    ProductDescription: item.DetailedDescription,
                }
            });
            console.log(UserList);

            this.setState({ UserList: [...UserList] });

        })


    }

    private _onProductUpdate(event) { 
        event.preventDefault();

        let list = pnp.sp.web.lists.getByTitle("Products");

        list.items.getById(this.state.UserList).update({
            ProductTitle: this.state.UserList.ProductTitle, 
            ProductDescription: this.state.UserList.ProductDescription,
        }).then(i => {
            //console.log(i);
        });
    }


  public render(): React.ReactElement<{}> {
    return (
      <div> 
        <h2>Single Product with ID: {this.props.match.params.id}</h2>

        <form onSubmit={this._onProductUpdate}>
            <div className={styles.halfColumn}>
                <label>
                    Request Title
                </label>
                <input
                    value={this.state.UserList.ProductTitle}
                    onChange={this.handleChangeProductTitle}
                    type="text"
                    name="Product Title"
                    maxLength={45}
                />
            </div>

            <div className={styles.halfColumn}>
                <label>
                    Detailed Description:
                </label>
                <input
                    value={this.state.UserList.ProductDescription}
                    onChange={this.handleChangeProductDescription}
                    type="text"
                    name="Detailed Description:"
                    maxLength={45}
                />
            </div>

        </form>

      </div>
    );
  }
}