为了账号安全,请及时绑定邮箱和手机立即绑定

不必要的重新渲染reactjs

不必要的重新渲染reactjs

侃侃无极 2023-08-24 18:04:16
所以我有这个按钮来添加一个项目来存储,你不能添加多个项目,但是当我单击该按钮两次或多次时,它会重新渲染两个组件两次,我尝试使用 useMemo 来记住该值,但它不起作用并得到e.target 中的(目标)未定义const handleAdd = useMemo((e) => {   let newItem = {id : e.target.name, price: e.target.value, title: e.target.title, contity: 1}   item.push(newItem)  const unique = Array.from(new Set(item.map(i => i.id))).map(id =>{return item.find(i => i.id === id)})  setItem(unique)}),[item])useMemo 的任何解决方案或任何其他想法来避免这种不必要的渲染..
查看完整描述

1 回答

?
狐的传说

TA贡献1804条经验 获得超3个赞

这可以在没有任何这些花哨的钩子的情况下完成。

您的代码可以在尝试更新之前简单地检查该项目是否已存在于数组中:

const handleAdd = (e) => { 

  const newId = e.target.name

  const itemFound = item.find((i) => i.id === newId)


  if (!itemFound) {

    const newItem = {id : e.target.name, price: e.target.value, title: e.target.title, contity: 1} 

    // Using spread to avoid mutability

    const updatedItem = [...item, newItem]

    setItem(updatedItem)

  }

}


查看完整回答
反对 回复 2023-08-24
  • 1 回答
  • 0 关注
  • 96 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信