时间戳

首页 > 解决方案 > 替换状态数组后使用useEffect更新子组件的正确方法

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

问题描述

我有一个父组件“Checkout”，我在其中调用我的 api 来获取事件票并将数据保存到状态。我有一个简单的函数，它获取现有的票证信息并向用户选择的票证添加一个。

结帐组件 

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

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

该函数工作正常，正在更新控制台中的计数状态，但子组件没有重新渲染，屏幕上的值保持在初始值。

我一直在研究，发现 componentWillReceiveProps 已经被 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),
  )

标签： reactjsreact-hooksuse-effect

解决方案

好的，所以看起来编辑数组状态的方法应该使用映射函数或使用先前状态的循环来完成。我能够根据 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;
  })
  ))

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

推荐阅读