Всем привет! Создаю проект на React, с использованием фреймворка
Next.js. В проекте используется API, запросы к которому отправляются при помощи
axios.
Вот код отправки запроса API:
В
index.js создаю элемент :
<API
width={isMobile ? '40%' : '17%'}
className={styles.maxwidth} type={isMobile ? '' : '2'}
columns={isMobile ? ['название', 'цена', 'изменение'] : ['название', 'символ', 'цена', 'капитализ.', 'курс']}
template={isMobile ? [
['Bitcoin', '???', '?? %']
]
: [
['Bitcoin', '???', '?? $', '?? $', '?? %']
]}
func={fetchCryptoRating}
isMobile={isMobile}
/>
Затем в файле
components/API.jsx произвожу некоторые действия, а именно задаю промежуток отправки API:
import React, {useState, useEffect} from 'react'
import Table from '../components/Table.jsx'
const API = ({ columns, template, width = 'auto', type = '', className = '', fake, func, isMobile }) => {
const [tables, setTables] = useState(template);
const [prices, setPrices] = useState(false);
const [color, setColor] = useState(false);
useEffect(() => {
setTimeout(() => {
func(setTables, setPrices, setColor, prices, isMobile)
console.log(color)
}, 10000)
})
return (
<Table
width={width}
className={className}
columns={columns}
tables={tables}
type={type}
fake={fake}
colors={color}
/>
)
}
export default API;
И потом запускаю функцию, которую передал в элемент :
import { cryptoList, cryptoName } from './Data'
import axios from 'axios'
export async function fetchCryptoRating(setTables, setPrices, setColor, prices, isMobile) {
const tables = []
const priceData = []
const colors = []
const options = {
method: 'GET',
url: 'https://binance43.p.rapidapi.com/ticker/24hr',
headers: {
'X-RapidAPI-Host': 'binance43.p.rapidapi.com',
'X-RapidAPI-Key': '5d54ff98ecmsh76d7bb813122478p16a6edjsnbd7442cf7856'
}
};
const result = await axios.request(options)
var serverData = result.data.filter(item => cryptoList.indexOf(item.symbol) != -1)
var count = 0
serverData.forEach(item => {
if (prices) {
if (parseInt(item.lastPrice) > prices[count]) {
colors.push('#23C14F')
}
if (parseInt(item.lastPrice) < prices[count]) {
colors.push('#FF4545')
}
if (parseInt(item.lastPrice) == prices[count]) {
colors.push('#433532')
}
}
else {
colors.push('#433532')
}
const itemData = isMobile ? [
cryptoName[count],
`${parseInt(item.lastPrice)} $`,
`${parseFloat(item.priceChangePercent).toFixed(2)} %`
] : [
cryptoName[count],
cryptoList[count].slice(0, 3),
`${parseInt(item.lastPrice)} $`,
`${parseInt(item.lastPrice) * 19200000} $`,
`${parseFloat(item.priceChangePercent).toFixed(2)} %`
]
tables.push(itemData)
priceData.push(parseInt(item.lastPrice))
count ++
})
setTables(tables)
setPrices(priceData)
setColor(colors)
}
Мое недоумение в том, что строчка console.log(color) в файле компонента с каждым разом выводит все больше строк:
После первого запроса:
['#433532', '#433532']
После второго запроса:
['#433532', '#433532']
['#433532', '#433532']
['#433532', '#433532']
['#433532', '#433532']
['#433532', '#433532']
['#433532', '#433532']
И с каждым запросом все больше. Хотя каждый раз отправляю только один запрос. Кто может объяснить, почему так происходит. Если что-то не понятно в моем объяснении, могу более подробно разъяснить. Буду очень благодарен за ответ
Простой