Question

我正在创建一个加密货币价格跟踪器，并在页面上实现数据排序。首先，我尝试使用javascript的.reverse（）方法按排名顺序对项目进行排序，但是React并没有更新视图。数组正在更新，但未在页面上显示。

import React, { useState, useEffect } from "react";
import {
  Title,
  Container,
  Logos,
  Names,
  Form,
  FormItem,
  ItemWrapper,
  IdWrapper
} from "./HomeStyles";
import axios from "axios";

function Home() {
  const [currencies, setCurrencies] = useState([]);
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    const getData = async () => {
      const response = await axios.get(
        "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&&?order=market_cap_asc&&per_page=50&&page=1"
      );
      const data = response.data;
      setCurrencies(data);
      setLoaded(true);
    };
    getData();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const reverseCurrencies = () => {
    setCurrencies(currencies.reverse());
    console.log(currencies);
  };

  const labels = ["Name", "Market Cap (USD)", "Price (USD)", "24h Change (%)"];

    return (
      <Container>
        <Title>Top 50 cryptocurrencies by market capitalization</Title>
        <Form>
          <FormItem>
            <IdWrapper
              style={{ cursor: "pointer" }}
              onClick={reverseCurrencies}
            >
              <p>RANK</p>
            </IdWrapper>

            {labels.map(label => {
              if (label === "24h Change (%)") {
                return (
                  <ItemWrapper last key={label}>
                    <p>{label}</p>
                  </ItemWrapper>
                );
              } else {
                return (
                  <ItemWrapper key={label}>
                    <p>{label}</p>
                  </ItemWrapper>
                );
              }
            })}
          </FormItem>

          {currencies.map(coin => (
            <FormItem key={coin.id}>
              <IdWrapper>
                <span>{coin.market_cap_rank}</span>
              </IdWrapper>
              <ItemWrapper>
                <Logos src={coin.image} alt={coin.name} />
                <Names>{coin.name}</Names>
              </ItemWrapper>
              <ItemWrapper>
                <p
                  className={
                    coin.price_change_percentage_24h < 0 ? "red" : "green"
                  }
                >
                  $
                  {coin.market_cap
                    .toFixed(2)
                    .replace(/\d(?=(\d{3})+\.)/g, "$&,")}
                </p>
              </ItemWrapper>
              <ItemWrapper>
                <p
                  className={
                    coin.price_change_percentage_24h < 0 ? "red" : "green"
                  }
                >
                  $
                  {coin.current_price
                    .toFixed(2)
                    .replace(/\d(?=(\d{3})+\.)/g, "$&,")}
                </p>
              </ItemWrapper>
              <ItemWrapper last>
                <p
                  className={
                    coin.price_change_percentage_24h < 0 ? "red" : "green"
                  }
                >
                  {coin.price_change_percentage_24h
                    .toFixed(2)
                    .replace(/\d(?=(\d{3})+\.)/g, "$&,")}
                  %
                </p>
              </ItemWrapper>
            </FormItem>
          ))}
        </Form>
      </Container>
    );
}

export default Home;

在reverseCurrencies函数中，货币数组正在记录到控制台中，并且已正确反转。要检出完整的代码（由于该代码已损坏，它可能没有此部分。），您可以转到此链接-> https://github.com/Arthur-Serafim/cryptocurrency-tracker

Answer 1

reverse进行inplace阵列突变。反转前复制数组

setCurrencies(currencies.slice(0).reverse());

列表未在React中更新

1 个答案: