Reactjs 反应：备忘录不起作用-单击按钮导致重新渲染

在本例中，我使用memo来防止组件重新渲染，但是，即使项目道具没有更改，它也会在每次单击按钮时重新渲染。根据react文档，只有当道具被更改时，带有备忘录的组件才会重新渲染

import React, { memo, useContext } from "react";
import { BasketContext } from "./Context";

const ItemCard = React.memo(({ item }) => {
  const [basket, setBasket] = useContext(BasketContext);
  function addItem() {
    const index = basket.findIndex((v) => v.id === item.id);
    if (index >= 0) {
      const data = [...basket];
      data[index].qte++;
      setBasket(data);
    } else {
      const newItem = Object.assign({}, item);
      newItem.qte = 1;
      setBasket(basket.concat([newItem]));
    }
  }

  return (
    <div className="card">
      <div className="card-body">
        <h5 className="card-title">{item.title}</h5>
        <button className="btn btn-primary" onClick={addItem}>
          Add to cart
        </button>
      </div>
    </div>
  );
});

export default ItemCard;

import React，{memo，useContext}来自“React”；
从“/Context”导入{BasketContext}；
const ItemCard=React.memo（{item}）=>{
const[basket，setBasket]=useContext（BasketContext）；
函数addItem（）{
const index=basket.findIndex（（v）=>v.id==item.id）；
如果（索引>=0）{
常量数据=[…篮子]；
数据[索引].qte++；
电子邮箱（数据）；
}否则{
const newItem=Object.assign（{}，item）；
newItem.qte=1；
收尾箱（筐壳（[新项目]）；
}
}
返回(
{item.title}
添加到购物车
);
});
导出默认项目卡；

但是，当您单击按钮时，您正在调用

setBasket

。如果我没有弄错，setBasket是您提供的状态更新程序功能，用于从

useContext

更新状态

组件不仅会在

道具更改时重新渲染，还会在
状态更改时重新渲染。每当上下文提供程序中的
值发生更改时。订阅到该上下文的所有组件都将重新呈现

因此，在这种情况下，使用
React.memo
包装组件不会阻止重新渲染