不必要的重新渲染reactjs

Question

所以我有这个按钮来添加一个项目来存储，你不能添加多个项目，但是当我单击该按钮两次或多次时，它会重新渲染两个组件两次，我尝试使用 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 的任何解决方案或任何其他想法来避免这种不必要的渲染..

Answer 1

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

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

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)

  }

}