更新对象数组而不发生突变

Question

我正在学习反应教程，但我迷路了。 我不明白起始行 9。

所以我试着做一个小小的幻觉

const updateTodo = (list, updated) => {
   const index = list.findIndex(item => item.id === updated.id)
   return [
   ...list.slice(0,index),
   updated,
   ...list.slice(index+1)
   ]
}

https://jsbin.com/sifihocija/2/edit?js,console却没有产生作者做的结果，怎么回事？

Answer 1

问题在于这一行：

const index = list.findIndex(item => item.id === updated.id)

updated是一个array ，要访问id，你还要指定index ，对于你正在使用loop其他array ，所以item将是array的每个object ，而item.id将给你每个object的id ，尝试这个：

const index = list.findIndex(item => item.id === updated[0].id)

 const arr = [ {id:1,name:'hello'}, {id:2,name:'hai'} ] const arr2 = [ {id:2,name:'this should be a new string'} ] const updateTodo = (list, updated) => { const index = list.findIndex(item => item.id === updated[0].id); return [ ...list.slice(0,index), ...updated, ...list.slice(index+1) ] } console.log(JSON.stringify(updateTodo(arr,arr2))) 

检查工作代码： https ： //jsbin.com/pazakujava/edit？js，console

如果您需要任何帮助，请告诉我。

Answer 2

改变

...list.slice(index+1)

至

...list.slice(index,0)