更新對象數組而不發生突變

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)