Почему возникает проблема с useState() в Next.js?

Question

[Тимур Ковалев]

Всем привет!
Разрабатываю проект на Next.js с использованием 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 запускаю функцию, которую передал в компонент, с определенной периодичностью при помощи setInterval():

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)
        }, 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': ''
        }
    };
    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)
}

Проблема заключается в том, что эти строки:
setTables(tables)
setPrices(priceData)
setColor(colors)
не меняют состояния переменных, заданных при помощи useState() в файле API.jsx. Кто-нибудь может объяснить, с чем это связано. Буду очень благодарен

Comments

[Александр Черемхин]

headers: {
'X-RapidAPI-Host': 'binance43.p.rapidapi.com',
'X-RapidAPI-Key': '2999eb74b1msh4b172020c74da2ap190109jsnfefee3973da1'
}
Как это стремно ключи компрометировать. Писец крипте (

Answer 1

[Алексей Чернавцев]

Потому, что функции-сеттеры отданы, но они потеряли контекст. Вам следует отдать данные в fetchCryptoRating, вернуть обновлённые значения из неё - в реакт компоненте в эффекте их получить обратно. И уже с этими новыми данными вызывать setTables и тд. Именно в эффекте.

Кстати, из эффекта нужно возвращать функцию, которая почистит интервал или таймаут (clearTimeout)

useEffect(() => {
        const intervalId = setInterval(() => {}, 1000)
        
        return () => clearInterval(intervalId)
    }, [])

Comments

[Тимур Ковалев]

Можете кодом показать, как это реализовать. То есть в функцию я передаю переменные tables, prices и color. Затем меняю их в функции и возвращаю. И потом уже в API.jsx вызывать функции для изменения состояния?

[Тимур Ковалев]

Ваше решение не совсем рабочее. Проблема в том, что если добавлю setTables() в setInterval():

useEffect(() => {
        setInterval(() => {
            setTables(1)
        }, 10000)
    },[]);

то код не будет работать. Значение tables не меняется

[Алексей Чернавцев]

const calculateNewValue = (oldVal) => {
    return oldVal + 1;
}

const HomePage: FC = () => {
    const [val, setVal] = useState(0);

    useEffect(() => {
        const timeoutId = setTimeout(() => {
            const newVal = calculateNewValue(val)

            setVal(newVal)
        }, 1000)

        return () => clearTimeout(timeoutId)
    }, [val])

    return (
        <div>
            {val}
        </div>
    );
};

[Алексей Чернавцев]

Код выше работает так: запускаем таймаут и по его завершению вычисляем новое значение. Считать его можно и в эффекте, можно и вызывая внешнюю функцию, не важно. Потом сетим новое значение. В зависимостях эффекта "val", поэтому всё запускается снова.

Кстати, желательно брать предыдущее значение из setState(prevValue => ...), иначе в нагруженном логикой компоненте можно получить неправильное поведение.
Действие в эффекте выше можно сократить до
setVal((prevVal) => calculateNewValue(prevVal))

[Тимур Ковалев]

Алексей Чернавцев, ещё можете посмотреть этот вопрос

[Алексей Чернавцев]

Тимур Ковалев, отметьте мой ответ как решение, пожалуйста

[Тимур Ковалев]

Он отмечен