javascript - 需要将客户价值传递回 React 中的 POST 操作

Question

我有一个表单，它根据从初始 GET 请求收到的 JSON 对象显示客户数据。我将这些信息映射出来以显示客户详细信息和他们的可用报价，并且我创建了一个 onClick 函数来突出显示他们选择的报价，该函数将 offerId 映射到我在 state 中定义的对象cardActive。我现在要做的是创建第二个 onClick 函数，该函数连接到一个提交按钮，该按钮触发一个返回以下值作为 JSON 正文的 POST 操作：

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

我在下面包含了我当前的组件，包括一个模拟从初始 GET 请求返回的响应的虚拟 JSON 对象

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
  });
}

任何关于如何做到这一点的建议/例子都会有很大的帮助

标签： javascriptreactjspostonclick

Answer 1

我认为在这种情况下，处理数据表单的最佳方法是通过 state 属性将是这样的：

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

因此，在您的提交功能中，您只需将收到的数据更新到this.state.dataModel.

然后您可以使用 axios 或 somthing 将 dataModel 作为 axios 方法的数据发送到。

检查我的沙箱可能会更清楚：

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