reactjs 此传播运算符如何、为何起作用

pvcm50d1 于 2023-01-30 发布在 React

关注(0)|答案(1)|浏览(93)

这是密码

funtion App(){
  const [Cards, setCards] = useState([
    {id: 0 , name: 'Harry Potter'},
    {id: 1 , name: 'Hermonie Granger'},
    {id: 2 , name: 'Ron Weasly'},])

  const shuffle = (arr)=>{
    // just shuffle the arr then return it.
  }
    
   return (
    <div className="App">
      
      <div>{Cards[0].name}</div>
      
      <button onClick={() => {
        setCards([...shuffle(Cards)])
        console.log(Cards)
        
        }}>Testing</button>
    </div>
  );

}

为什么这个可以用setCards([...shuffle(Cards)])而不是这个setCards(shuffle(Cards))。
即使我不使用传播操作符，它 Shuffle （见控制台），但不显示在页面上。
：）;）.

reactjs

来源：https://stackoverflow.com/questions/75265110/how-why-this-spread-operator-works

1条答案

按热度按时间

flseospp1#

JavaScript是一种passes objects by reference。这意味着即使对象的内部值发生了变化，它也总是等于自身。为了证明这一点，请看下面的代码片段：

const a = [1, 2, 3];
const b = a.sort((x, y) => y - x);

console.log('a:', a);
console.log('b:', b);
console.log('equals:', Object.is(a, b));

在上面的代码片段中，您将看到a和b包含相同的值，即使只有b被.sort重新排序。您还将看到a === b等于true。这是因为Array.prototype.sort执行in-place排序。请参阅文档：
sort()方法就地对数组元素进行排序，并返回对已排序的同一数组的引用。
从React的useState文档中可以看到：
如果通过www.example.com比较确定下一个状态等于上一个状态，React将忽略您的更新Object.is。
所以，为了回答你为什么spread算子能修正它，不，spread算子实际上并不能修正它。
实际的修复是在使用[...array]时创建的新数组，因为新数组是新引用：

const a = [1, 2, 3];
const b = [...a].sort((x, y) => y - x);

console.log('a:', a);
console.log('b:', b);
console.log('equals:', Object.is(a, b));

赞(0）回复(0）举报 2023-01-30

我来回答

reactjs 此传播运算符如何、为何起作用

1条答案

相关问题

热门标签

最新问答