reactjs 这两个处理状态的函数之间的差异

jm81lzqq  于 2023-01-30  发布在  React
关注(0)|答案(1)|浏览(148)

我尝试了这两个函数,我认为它们做同样的事情,但显然没有。
第一个功能:

setEatenFoodList(prevList => {
      const newList = [];
      for (let i=0 ; i<prevList.length ; i++) {
        if (i === index){
          const editedFood = prevList[i];
          editedFood.removingFade = true;
          newList.push(editedFood)
        } else {
          newList.push(prevList[i])
        }
      }
      return newList;
    })

第二个功能:

setEatenFoodList(prevList => {
      prevList[index].removingFade = true;
      return prevList;
    })

我看不出有什么区别吗?

iyfjxgzm

iyfjxgzm1#

第一个代码创建一个名为“newList”的新列表,并迭代原始列表“prevList”的元素并将它们添加到新列表中。如果循环的当前索引等于变量“index”,则创建一个名为“editedFood”的新变量,它是该索引处元素的副本,将editedFood的removingFade属性设置为true并推送到newList,最后返回newList作为输出。
第二段代码更简单,它直接修改“prevList”,方法是将索引“index”处元素的“removingFade”属性设置为true,并返回原始列表“prevList”作为输出。
这两个代码之间的主要区别在于,第一个代码创建一个新列表,而第二个代码修改原始列表。
更简单地说:第一个函数遍历newList中的所有元素,并将所有内容都推到newList中。2第二个函数将所有内容推到原始列表(prevList)中。

相关问题