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

Question

这是代码。

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 列表没有重新渲染，它保持默认方式.

非常感谢任何帮助！

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)时，可能会导致重新渲染，因为你会按照规定的方式更新数组状态变量