Существует товар , который нужно поместить в уже существующий массив в api. Нужно как-то вероятнее запушить один и тот же товар в один и тот же массив

Существует товар , который нужно поместить в уже существующий массив в api. Как сделать так , чтобы при нажатии на кнопку , я мог несколько раз запушить один и тот же товар в один и тот же массив.

На данном скриншоте  можно увидеть , как я пытался это сделать , но у меня так и не вышло.


Ответы (2 шт):

Автор решения: Alexander

Если я правильно понял то, закинуть полученные данные в стейт вместе с новым таваром, а потом отправить их обратно. Через спред оператор, будет каждый раз новый товар попадать

const arr = ["name", "pop"];

const App = () => {
  const [order, setOrder] = useState();

  useEffect(() => {
    axios.put({ /* Отправляет */ url: "", order });
  }, [order]);

  const postXuz = () => {
    axios({
      /* Получаем */
    }).then((recievedData) => {
      setOrder([recievedData.data.orders, ...arr]);
    });
  };
};
→ Ссылка
Автор решения: HaZcker
import React, { useState, useEffect } from 'react'

function App() {
  const [items, setItems] = useState([])

  useEffect(() => {
    let isFetching = false
    const item = ['name', 'pop']

    const fetchItems = async () => {
      if (!isFetching) {
        isFetching = true
        return axios({
          url: 'http://some-url',
          method: 'GET',
        })
      }
    }

    fetchItems()
      .then((recievedData) => pushItemToArray(recievedData, item, 3))
      .then((itemsList) => setItems(itemsList))
      .catch((e) => console.log(e))
      .finally(() => (isFetching = false))
  }, [])

  useEffect(() => {
    let isFetching = false
    const putItems = async () => {
      if (!isFetching) {
        isFetching = true
        return axios({
          url: 'http://some-url',
          method: 'GET',
          data: items,
        })
      }
    }

    putItems().finally(() => isFetching = false)
  }, [items])

  function pushItemToArray(array, item, count) {
    const res = [...array]
    for (let i = 0; i < count; i++) {
      res.push(item)
    }
    return res
  }

  function renderItem(item) {
    return (
      <div>
        <div>{item.title}</div>
        <div>{item.description}</div>
      </div>
    )
  }

  return <div>{items.map(renderItem)}</div>
}
→ Ссылка