javascript - react 中列表未更新

Question

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

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;

在reverseCurrency函数中，货币数组被记录到控制台并被正确反转。要查看完整的代码(可能没有这部分代码，因为它已损坏。)，您可以转到此链接 -> https://github.com/Arthur-Serafim/cryptocurrency-tracker

Answer 1

反向会inplace阵列突变。在反转之前复制数组

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