Необходимо передать клиентские ценности в действие POST в React

Question

У меня есть форма, которая отображает данные клиента на основе объекта JSON, полученного из первоначального запроса GET.Я отображаю эту информацию для отображения сведений о клиенте и их доступных предложениях, и я создал функцию onClick, чтобы выделить выбранное предложение, которое отображает offerId для объекта, который я определил в состоянии cardActive.Сейчас я пытаюсь создать вторую функцию onClick, связанную с кнопкой отправки, которая запускает действие POST, возвращающее следующие значения в виде тела JSON:

{
  "CustomerId" : "1",
  "SessionId" : "9636",
  "Offer": {
    "OfferId" : "1",
    "OfferName" : "Business Internet 75"
  }
}

Я включил свой текущий компонент нижевключая фиктивный объект JSON, который имитирует ответ от этого начального запроса GET

class UsersList extends Component {
  constructor() {
    super();
    this.selectCard = this.selectCard.bind(this);
    this.state = {
      cardActive: null,
      offerName: null,
      customerId: null,
      customers: [
        {
          CustomerId: "1",
          LastName: "Doe",
          FirstName: "Jane",
          Address: {
            Address1: "1811 Chestnut Street",
            Address2: null,
            City: "Philadelphia",
            State: "Pennsylvania",
            Zip: "19103"
          },
          Offers: [
            {
              OfferId: "Offer1",
              Name: "Offer Number 1",
              Products: [
                {
                  ProductId: 1,
                  ProductName: "Cool stuff"
                },
                {
                  ProductId: 2,
                  ProductName: "Some little stuff"
                }
              ],
              Price: "$1"
            },
            {
              OfferId: "Offer2",
              Name: "Offer Number 2",
              Price: "$2",
              Products: [
                {
                  ProductId: 3,
                  ProductName: "More stuff"
                },
                {
                  ProductId: 4,
                  ProductName: "Hey theres stuff here"
                }
              ]
            },
            {
              OfferId: "Offer3",
              Name: "Offer Number 3",
              Price: "$3",
              Products: [
                {
                  ProductId: 5,
                  ProductName: "Check out this stuff"
                },
                {
                  ProductId: 5,
                  ProductName: "More stuff"
                }
              ]
            }
          ]
        }
      ]
    };
  }

  selectCard(offerId) {
    this.setState({ cardActive: offerId });
  }

  render() {
    return (
      <div>
        {this.state.customers.map((customer, index) => {
          return (
            <div key={index + customer.CustomerId}>
              <h3>
                Name: {customer.LastName}, {customer.FirstName}
              </h3>
              <h3>Customer ID: {customer.CustomerId}</h3>
              <h3>
                Address:
                <br />
                {customer.Address.Address1}
                <br />
                {customer.Address.City}, {customer.Address.State}{" "}
                {customer.Address.Zip}
              </h3>
              <br />
              <h2>Available Offers</h2>
              <Grid container spacing={24} justify="center">
                {customer.Offers.map((Offer, index) => {
                  return (
                    <div
                      key={index + Offer.OfferId}
                      onClick={() => this.selectCard(Offer.OfferId)}
                    >
                      <Grid item xs={12}>
                        <div
                          className={
                            Offer.OfferId === this.state.cardActive
                              ? "cardActive"
                              : "card"
                          }
                        >
                          <div className="container">
                            <h5>
                              <b>{Offer.OfferId}</b>
                            </h5>
                            <h2>{Offer.Name}</h2>
                            {Offer.Products.map((Product, index) => {
                              return (
                                <div key={index + Product.ProductId}>
                                  <p>+ {Product.ProductName}</p>
                                </div>
                              );
                            })}
                            <h3>{Offer.Price}</h3>
                          </div>
                        </div>
                      </Grid>
                    </div>
                  );
                })}
              </Grid>
            </div>
          );
        })}
        <button className="navbuttonSelected">Submit</button>
      </div>
    );
  }
}

export default UsersList;

Я добавил объекты в состояние, которое я надеюсь заполнить (offerName, CustomerId и сохраняя cardActive в качестве держателя для offerId) и теперь я пытаюсь выяснить, как написать функцию для сопоставления всех этих значений для отправки обратно через POST.Лучшее, что я придумала до сих пор, это

submitSelection(offerId, offerName, CustomerId) {
  this.setState({
    cardActive: offerId,
    offerName: offerName,
    CustomerId,
    SessionId: SessionId
  });
}

Любые предложения / примеры того, как это сделать, будут огромной помощью

Answer 1

Я думаю, что лучшим способом обработки формы данных является свойство состояния, в этом случае будет что-то вроде этого:

this.state = {
       dataModel:{
         cardActive : null,
         offerName  : null,
         customerId : null,
         CustomerId : null,
         SessionId  : null,
       },
       ...
       }
      ]
    };

Таким образом, в функции отправки вы можете просто обновить полученные данные до this.state.dataModel.

тогда вы можете использовать axios или что-то для отправки dataModel в качестве данных метода axios.

Проверьте, что моя песочница может быть понятнее:

https://codesandbox.io/s/8xm00xplm2