在 React 中调用同步 function 来编辑 API 异步调用 UseEffect

Question

So I have a UseEffect function which is being called every 2 seconds that returns the price of a crypto currency. When I get a value is returned I call a removeZeroes() in the render section to edit the price format. This causes a lot of weird things to happen

const [price, setPrice] = useState("...")
const [onedaychange, setOnedaychange] = useState("-.--")
const [symbol, setSymbol] = useState("")

const removeZeroes = (rawprice, name) => {
        var tempprice = rawprice
        let isFiat = false
        for (let index = 0; index < fiatCurrencies.fiat.length; index++) {
            const element = fiatCurrencies.fiat[index];
            if (name.includes(fiatCurrencies.fiat[index]) >= 0) {

                isFiat = true
                console.log("if ", isFiat, symbol, fiatCurrencies.fiat[index], name.includes(fiatCurrencies.fiat[index]))
                break;
            }
        }
        if (!isFiat) {
            tempprice = rawprice.toLocaleString('decimal', { minimumFractionDigits: 8 })
        }
        isFiat = false
        return tempprice
}

useEffect(() => {
        if (stock) {
            //console.log(symbol, " is stock")
        } else {
            //console.log(symbol, " is crpyto")
        }
        const getPrice = async (tickprice) => {
            let binance = new ccxt.binance({
                apiKey:
                    myKeys.API_KEY,
                secret:
                    myKeys.SECRET_KEY,
            });
            try {
                tickprice = (await binance.fetchTicker(tickername)).last
                let onedayclose = (await binance.fetchOHLCV(tickername, "1h", Date.now() - 86400000))[0][1]
                setPrice(tickprice)
                setSymbol(tickername)
                setOnedaychange(((tickprice / onedayclose * 100) - 100).toLocaleString('decimal', { minimumFractionDigits: 2 }))
            } catch (error) {
                console.log(error)
                setPrice(error.message)
            }
            //console.log(ticker.tickername)
        }
        var timerID = setInterval(() => {
            getPrice()
        }, 2000);
        return function cleanup() {
            clearInterval(timerID);
        };
    }, [price]);

return (
   <div>
       {removeZeroes(price, symbol)}
   </div>
   )
}
ReactDOM.render(
    <TickerAPIData />,
    document.getElementById('root')
);

This page is a child to the Tickers.JS which uses a map function for each crypto in the database. If you look a the long console.log within removeZeroes() with 2 ticker elements this the result I get.

TickerAPIData.js:59 if  true BTC/USDT USD true
TickerAPIData.js:59 if  true ETH/BTC USD false
TickerAPIData.js:59 if  true BTC/USDT USD true
TickerAPIData.js:59 if  true BTC/USDT USD true
TickerAPIData.js:59 if  true ETH/BTC USD false

The for loop, loops once and and the if statement is satisfied as BTC/USDT contains USD. When the for loops runs for another currency ETH/BTC we see that the isFiat value remains true, even though it is set to false at start. Also we see that the if statement is satisfied for ETHBTC even though ETH/BTC does not contain USD as seen by the TickerAPIData.js:59 if true ETH/BTC USD "false" <-. This is really confusing me, can someone help explain why this is happening.

Don't mind the unneeded code in this page, I was testing everything I could think of to try to figure this out and get it working.

Answer 1

This

if (name.includes(fiatCurrencies.fiat[index]) >= 0) {
  isFiat = true
  console.log("if ", isFiat, symbol, fiatCurrencies.fiat[index], name.includes(fiatCurrencies.fiat[index]))
  break;
}

would always run irrespective of whatever conditions: you can see that in your log statements

name.includes(fiatCurrencies.fiat[index]) >= 0 -> this would always evaluate to true (test it). Is this the actual behaviour you want?

perhaps change to this:

if (name.includes(fiatCurrencies.fiat[index])) {
  isFiat = true
  console.log("if ", isFiat, symbol, fiatCurrencies.fiat[index], name.includes(fiatCurrencies.fiat[index]))
  break;
}