使用多个参数在React中发布请求

Question

我对React开发还很陌生。在我正在开发的购物应用程序中，我试图通过按钮向我的休息服务发送发帖请求，以将产品添加到购物车。我添加了axios库来执行此操作。由于所有在线教程都通过表格将信息获取到请求中，所以我想知道如何收集从较早的get请求中获取的信息，并将其作为发布请求发送回另一个数据表。以下是我的方法无效。

 <button 
  onClick={this.add.bind(this,this.state.groups.map(group =>
  <div key={group.id}>{group.name}</div>
  ))}
  className="flex-c-m size1 bg4 bo-rad-23 hov1 s-text1 trans-0-4">
 </button>

post request config方法看起来像这样

add() {
    axios({
    method: 'post',
    url: '/api/cart',
    body: {
      productid: '',
      productname: ''
    }
  });
}

请帮助我解决这个问题。预先感谢。

Answer 1

我认为您正在尝试基于无组的循环呈现按钮组

1. 循环渲染按钮
2. 传递组ID和名称以将功能添加为参数
3. 从不直接在渲染器中进行函数绑定，而是始终在构造函数中进行

在构造函数中手动绑定

   constructor(props){
       super(props){
            this.add = this.add.bind(this);
       }
   }

迭代组并渲染按钮，如下所示

{this.state.groups.map(group => <button key={group.id} onClick={() => this.add(group.id, group.name)} className="flex-c-m size1 bg4 bo-rad-23 hov1 s-text1 trans-0-4">Add to Cart</button> )}

现在您的添加功能应如下图所示

add(id, name) {
    axios({
    method: 'post',
    url: '/api/cart',
    body: {
      productid: id,
      productname: name
    }
  });
}

Answer 2

这应该有效。

Answer 3

这是我的其余服务器实现

@PostMapping("/cart")
public Cart create(String productName, @RequestBody Map<String, String> body){
    String productid = body.get("productid");
    String productname=("productname");

    return cartRepository.save(new Cart(productid,productname));
}