我从API提取了数据并映射了数据,但是当用户单击MARKET CAP时我想颠倒顺序。我希望用户点击
{props.coins.filter(searchingFor(search)).map...
在代码中,我要替换映射的数组:
const [reverseCoin, setReverseCoin] = useState(
[...coin].filter(searchingFor(search)).reverse()
);
和我做的相反的东西:
import Button from "../../UI/Forms/Button/Button";
import styled from "styled-components";
import Icon from "../../assets/images/sort-solid.svg";
import SearchIcon from "../../assets/images/search-solid.svg";
import * as Styles from "../../components/Table/Tables.styles";
import { Link } from "react-router-dom";
import "./PriceList.scss";
function searchingFor(search) {
return function(x) {
return x.name.toLowerCase().includes(search.toLowerCase()) || false;
};
}
//MY FUCTIONAL COMPONENT*************
//one prop has been passed to this which I called it "coins"
const PriceList = props => {
console.log(props.coins);
const [coin, setCoin] = useState([]);
const [color, setColor] = useState("");
const [MarketCapLow, setMarketCapLow] = useState(false);
const [search, setSearch] = useState("");
/// this is the variable that holds the reversed array
const [reverseCoin, setReverseCoin] = useState(
[...coin].filter(searchingFor(search)).reverse()
);
const timeIntervels = ["1H", "24H", "1W", "1M", "1Y"];
useEffect(() => {
setCoin(props.coins);
}, [props.coins]);
const updateSearch = e => {
setSearch(e.target.value);
};
const handleClick = name => {
setColor(name);
};
//creating a table for my data********
return (
<TableContainer>
<SearchBarMainContainer>
<SearchBarContainer>
<SearchInputContainer>
<img
src={SearchIcon}
width="20"
height="20"
style={{ marginRight: "16px" }}
/>
<SearchBarInput
type="text"
value={search}
onChange={updateSearch}
placeholder="Search coins..."
/>
</SearchInputContainer>
<SearchPriceChange>
{timeIntervels.map(d => (
<SearchPriceChangeItems
id={d}
onClick={() => {
handleClick(d);
}}
className={color === d ? "purple" : "black"}
>
{d}
</SearchPriceChangeItems>
))}
</SearchPriceChange>
</SearchBarContainer>
</SearchBarMainContainer>
<Styles.Tablestyles>
<tbody>
<Styles.TableRowStyles bg>
<Styles.TabelHeadingStyles bg>#</Styles.TabelHeadingStyles>
<Styles.TabelHeadingStyles bg>NAME</Styles.TabelHeadingStyles>
<Styles.TabelHeadingStyles bg>PRICE</Styles.TabelHeadingStyles>
<Styles.TabelHeadingStyles bg>CHANGE</Styles.TabelHeadingStyles>
<Styles.TabelHeadingStyles bg>
<Styles.MarketCap
onClick={() => {
setMarketCapLow(!MarketCapLow);
}}
>
<div>MARKET CAP</div>
<CoinIcon width height src={Icon} />
</Styles.MarketCap>
</Styles.TabelHeadingStyles>
<Styles.TabelHeadingStyles bg>TRADE</Styles.TabelHeadingStyles>
</Styles.TableRowStyles>
{props.coins.filter(searchingFor(search)).map(coin => {
const {
rank,
logo_url,
name,
["1d"]: { price_change_pct },
currency,
price,
market_cap
} = coin;
const newMarketPct = (price_change_pct * 100).toFixed(2);
const newPrice = Math.floor(price * 100) / 100;
const newMarketCap =
Math.abs(market_cap) > 999999999
? Math.sign(market_cap) *
(Math.abs(market_cap) / 1000000000).toFixed(1) +
"B"
: Math.sign(market_cap) * Math.abs(market_cap);
return (
<Styles.TableRowStyles key={rank}>
<Styles.TabelDataStyles>{rank}</Styles.TabelDataStyles>
<Styles.TabelDataStyles grey flex>
<CoinIcon style={{ marginRight: "12px" }} src={logo_url} />
{name} ({currency})
</Styles.TabelDataStyles>
<Styles.TabelDataStyles>${newPrice}</Styles.TabelDataStyles>
<Styles.TabelDataStyles
style={
price_change_pct.charAt(0) === "-"
? { color: "#ff2734" }
: { color: "#23cc9a" }
}
>
{newMarketPct}%
</Styles.TabelDataStyles>
<Styles.TabelDataStyles>${newMarketCap}</Styles.TabelDataStyles>
<Styles.TabelDataStyles>
<Link to={`/prices/${coin.currency}`}>
<Button padding style={{ width: "60%" }}>
Trade
</Button>
</Link>
</Styles.TabelDataStyles>
</Styles.TableRowStyles>
);
})}
</tbody>
</Styles.Tablestyles>
</TableContainer>
);
}
我不知道如何用反转的数据替换原始数据,因此任何建议都会很棒。我正在使用React,样式化的组件和挂钩。这是我的代码:
{{1}}
答案 0 :(得分:0)
我建议仅使用状态中存储的标志来切换数组的显示方式。这样,当两个数组本质上都是相同的数据时,就可以避免将两个数组存储在状态中。当然,您需要创建一个点击处理程序来更改reversed
标志的值并将其放置在您希望点击发生的任何位置,但是我看不到代码中的位置。
[reversed, setReversed] = useState(false);
...
// declare this variable somewhere inside your component outside the return statement.
// You have create a copy to prevent reverse() from mutating the prop in place.
const displayedCoins = reversed ? Array.from(props.coins).reverse() : props.coins;
...
{displayedCoins.filter(searchingFor(search)).map((coin) => { ... });