Отправить запрос в 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>

метод настройки после запроса выглядит примерно так

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

Пожалуйста, помогите мне разобраться в этом.Заранее спасибо.

Answer 1

Это должно работать.

Answer 2

Это моя реализация сервера отдыха

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

Answer 3

Я думаю, что вы пытаетесь отобразить набор кнопок в цикле на основе количества групп

1. Кнопка визуализации в цикле
2. Передать идентификатор и имя группы для добавления функции в качестве параметров
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
    }
  });
}