0

这是代码。

const [coins, setCoins] = useState([])
const [sortedCoins, setSortedCoins] = useState([])

使用useEffect，我从 API 代码请求并将其存储在硬币中，然后将相同的数据存储在 中sortedCoins，然后使用此函数对它进行排序（可能会丢失一些}，因为它只是函数的一部分，本质上是这部分按名称对数据进行排序）。

const sort = (e) => {
    let name = e.target.getAttribute("name");

    if (name === "cryptonames") {
      let temp = coins;

      temp = temp.sort((a, b) => {
        return a.name.localeCompare(b.name);
        
      });

      setSortedCoins(temp);
}

现在在另一个组件上我这样做：

{sortedCoins.map((coin) => {
        return <SpecificCoin key={coin.id} {...coin}></SpecificCoin>;
      })}

我的问题是，即使排序成功并且sortedCoins是按名称排序的数组（我使用 CoinGecko API 处理加密货币），我的SpecificCoin列表也不会重新呈现，它保持默认方式。

任何帮助深表感谢！

4

1 回答 1

0

老实说，我不能说我完全理解你的问题，但我可以看到你的排序功能有问题

      let temp = coins;

不要将数组与变量等同起来，因为它不会创建数组的副本，并且任何更改都temp意味着您正在直接改变coins状态变量，如果要对状态变量进行任何更改，这不会导致重新渲染它。尝试

let temp = [...coins]

或者

let temp = coins.slice()

第二，

temp = temp.sort((a, b) => {
...

sort()在数组上更改数组本身，所以不需要这样做，而是去

 temp.sort((a, b) => {
    ...

然后，当您这样做时setSortedCoins(temp)，可能会导致重新渲染，因为您将按照规定的方式更新数组状态变量

于 2021-06-26T20:16:04.387 回答