在替换状态数组后使用useEffect更新子组件的正确方法

Question

我有一个父组件"Checkout"，在那里我调用事件票证的api并将数据保存到state。我有一个简单的功能，可以获取现有的票证信息，并将其添加到用户选择的票证中。

结账组件

const handleTicketAdd = (e) => {
// create new ticket array
const newTickets = tickets;
// 
newTickets[e.target.id].count++;
console.log(newTickets);
setTickets(newTickets);
console.log(tickets);
}

此函数作为道具传递给子组件"Tickets"，并在映射行中调用。

该函数运行良好，正在控制台中更新计数状态，但子组件没有重新呈现，屏幕上的值保持在初始值。

我一直在研究，发现组件WillReceiveProps已经被useEffect钩子取代了。我一直试图让它在我的子组件中工作，但没有成功：

票据组件

useEffect(()=>{
console.log("Tickets Changed", props.tickets);
}, [props.tickets]);

当props.tickets更改时，日志不会触发，所以我知道我没有正确处理此问题。有人能给我指正确的方向吗。

更新

根据下面的反馈，我修改了我的代码，它几乎完成了。问题是，它在数组中添加了一个带有对象计数值的新字段，而不仅仅是更新对象的计数字段。

setTickets(prevTickets => ([...prevTickets, prevTickets[e.target.id].count = prevTickets[e.target.id].count + 1])
)

如果我尝试弹出最后一个值，我会在数组中添加更多的新字段。我将如何实现删除正在生成的附加字段。以下不起作用：

setTickets(prevTickets => ([...prevTickets, prevTickets[e.target.id].count = prevTickets[e.target.id].count + 1], prevTickets.pop()),
)

setTickets(prevTickets => ([...prevTickets, prevTickets[e.target.id].count = prevTickets[e.target.id].count + 1], prevTickets.slice(-1)[0),
)

Answer 1

好吧，所以编辑数组的in状态的方法应该使用map函数或使用上一个状态的循环来完成。我能够根据Shubham的反馈来解决这个问题。

// update count based on previous state 
setTickets(prevTickets => (prevTickets.map((ticket, index) => {
console.log(index, e.target.id);
// if mapped object's id equals the arrays index, it's the value to edit
if (e.target.id == index) {
console.log(index);
const count = ticket.count + 1;
// return object with updated count values
return { ...ticket, count }
}
return ticket;
})
))

这使我可以编辑数组中所需的对象值，而不需要任何其他字段或值。

Answer 2

更新时不应该更改状态，而是需要克隆和更新状态

const handleTicketAdd = (e) => {
const id = e.target.id;
setTickets(prevTickets => ([
...prevTickets.slice(0, id),
{
...prevTickets[id],
count: prevTickets[id].count + 1
}
...prevTickets.slice(id + 1);
]));
}