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

【问题标题】：Post request in React with multiple parameters使用多个参数在 React 中发布请求
【发布时间】：2019-07-17 06:02:08
【问题描述】：

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

 <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 请求配置方法看起来像这样

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

请帮助我解决这个问题。提前致谢。

【问题讨论】：

this.state.groups 是什么？您是否尝试根据组数循环呈现按钮？
Groups是存放较早get请求的数组
你没有回答我的问题你想用下面的代码实现什么？ {this.add.bind(this,this.state.groups.map(group =>
{group.name}
))}
我正在尝试从我之前获得的产品表中收集 get 请求的产品 ID 和产品名称，并将其作为发布请求发送到购物车表。这是一个“添加到购物车”按钮
请查看我更新的答案

标签： sql reactjs rest axios

【解决方案1】：

这是我的休息服务器实现

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

【讨论】：

【解决方案2】：

这应该可行。

【讨论】：

【解决方案3】：

我认为您正在尝试根据组数循环呈现一组按钮

循环渲染按钮
传递组 ID 和名称以将函数作为参数添加
切勿直接在渲染中进行函数绑定，而是始终在构造函数中进行

在构造函数中手动绑定

   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 函数应该如下所示

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

【讨论】：

感谢您的回答 Hemadri Dasari。