上下文提供程序不會在狀態更改時重新呈現

Question

這是代碼。

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

使用useEffect ，我從 API 代碼中請求並將其存儲在硬幣中，然后我將相同的數據存儲在sortedCoins ，然后使用這個函數我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列表不會重新呈現，它保持默認方式。

任何幫助深表感謝！

Answer 1

不能說我完全理解你的問題，但我可以看到你的排序功能有問題

      let temp = coins;

不要將數組等同於變量，因為它不會創建數組的副本，並且對temp任何更改都意味着您正在直接改變coins狀態變量，如果要進行任何更改，則不會導致重新渲染做到了。 嘗試

let temp = [...coins]

要么

let temp = coins.slice()

第二，

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

數組上的sort()改變了數組本身，所以不需要這樣做，而是去

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

然后當您執行setSortedCoins(temp) ，它可能會導致重新渲染，因為您將遵循更新數組狀態變量的規定方法