上下文提供程序不会在状态更改时重新呈现

如何解决上下文提供程序不会在状态更改时重新呈现

这是代码。

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

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

}

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

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>; })} 是按名称排序的数组（我使用 CoinGecko API 处理加密货币），我的 sortedCoins 列表没有重新呈现，它保持默认方式。

非常感谢任何帮助！

解决方法

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

      let temp = coins;

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

let temp = [...coins]

或

let temp = coins.slice()

其次，

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

数组上的

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

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

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