Существует товар , который нужно поместить в уже существующий массив в 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>
}
