改變物件陣列的最佳和干凈的方法是什么？
我有一個看起來像這樣的代碼。
const [get_post, set_post] = useState([
{name: "First"},
{name: "Second"},
{name: "Third"},
])
我想在某個索引上添加和編輯鍵。所以我這樣做：
<button onClick={()=>
set_post([...get_post, get_post[0].content = "This is index zero" ])
}> Manipulate! </button>
我的結果是這樣的：
[
{"name": "First", "content": "This is index zero"},
{"name": "Second"},
{"name": "Third"},
"This is index zero" <-- This line is the problem
]
我在谷歌上搜索了很多，但這似乎是一個常見的主題。
這篇文章用鍵控物件描述了相同的問題和解決方案，這對我沒有幫助。
React Hooks useState() 與 Object
這篇文章支持 3rd 方庫和/或深度復制，我懷疑這也不是“正確”的做法。
在 ReactJS 中更新陣列中的物件的最佳方法是什么？
這個執行緒還支持很多深拷貝和映射，我想我不需要（它是一個陣列，我應該能夠通過索引來尋址我的物件）？
如何在 React Hooks 的物件陣列中更新狀態`onChange`
另一個深拷貝解決方案
https://codereview.stackexchange.com/questions/249405/react-hooks-update-array-of-object
名單還在繼續……
基本上我想要沒有多余線條的結果，
如果可能的話：
- 無需深度復制要重新注入的狀態。
- 沒有第 3 方庫。
- 不使用鍵控物件。
- 無需在 set_post 中運行地圖/過濾器回圈。
編輯：為什么在 setPost 中不需要 map 的原因。
在我的特定場景中，呈現 getPost 的模塊已經是一個地圖回圈。試圖避免嵌套回圈。
（我的邏輯簡化了）
const [get_post, set_post] = useState([
{name: "First"},
{name: "Second"},
{name: "Third"},
])
//Render module
//Fixed numbers of controllers for each Object in Array.
get_post.map((post, index)=> {
<>
<button onClick={()=>
set_post([...get_post, get_post[index].content = "Content 1" ])}
}>
Controller 1
</button>
<button onClick={()=>
set_post([...get_post, get_post[index].content = "Content 2" ])}
}>
Controller 2
</button>
<button onClick={()=>
set_post([...get_post, get_post[index].content = "Content 3" ])}
}>
Controller 3
</button>
//...
</>
})
uj5u.com熱心網友回復：
如果您只想更改第一個屬性，請先從陣列中提取它。
您可以使用功能更新方法訪問當前狀態值并回傳一個包含您想要的更改的新值。
set_post(([ first, ...others ]) => [{
...first,
content: "This is index zero"
}, ...others])
要更改任何特定索引，您可以將當前陣列映射到一個新陣列，在到達時為目標索引創建一個新物件
let x = the_target_index
set_post(posts => posts.map((post, i) => i === x ? {
...post,
content: `This is index ${x}`
} : post))
與您在答案中似乎想要做的事情相匹配的略有不同的版本是
set_post(posts => {
posts[x] = { ...posts[x], content: `This is index ${x}` }
// or even something like
// posts[x].content = `This is index ${x}`
return [...posts] // clone the array
})
uj5u.com熱心網友回復：
我找到了一個有效的解決方案！
我還沒有在其他地方看到過這個帖子，所以研究一下可能很有趣。
要按索引更改或向陣列中的物件添加鍵/值，只需執行以下操作：
<button onClick={() => {
set_post( [...get_post , get_post[index].content = "my content" ] )
set_post( [...get_post ] ) //<-- this line removes the last input
}
}>
正如 Phil 所寫，較早的代碼被解釋為：
const val = "This is index zero";
get_post[0].content = val;
get_post.push(val);
這似乎洗掉了最新的 get_post.push(val)
有人可以解釋為什么會這樣嗎？
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/325052.html
標籤：javascript 反应 目的 使用状态