单击此按钮时：

<Button
  onClick={(e) => {
    addToCard(item);
    handleprisma();
  }}
>
  add to cart
</Button>

此函数要将项目添加到我的卡中：

const addToCard = (item) => {
    const newCard = {
      fff: "1",
      ddd:  "2",
      aa: "3",
      dfdfdf:  "4",
      asdf:  "5",
      teest:  "6",
    
    };
    context.setcount(context.count + 1);
    context.setcard((prev) => [...prev, newCard]);
  };

这个人想把它发到我的数据库里：

const testtt= context.card;
  async function handleprisma() {
    const res = await axios.post('/api/Me', {
      testtt,
    });
    console.log(res.data);
  }

默认情况下，该卡的值为[]，因此我认为当我单击该按钮时，它不会运行addToCard！但在数据库中第二次单击时，我看到第一次单击时应创建的阵列在那里，当我再次单击时，我看到第二次单击时应创建的阵列在那里。
我用这个解决了这个问题：

useEffect(() => {
    if (context.card.length !== 0) {
      handleprisma();
    }
   
  }, [addToCard]);

因此，当我有1项在我的卡，如果我刷新页面，3或4个新的副本相同的东西将创建在数据库中，所以我怎么能只是停止获得这些副本？
我想使用useCallback来解决这个问题，所以我将useEffect转换为：

useCallback(() => {
    if (context.card.length !== 0) {
      handleprisma();
    }
    console.log('sfd');
  }, [addToCard]);

以及：

useCallback(() => {
    if (context.card.length !== 0) {
      handleprisma();
    }
    console.log('sfd');
  }, [context.card]);

但是为什么我点击按钮时什么也没发生呢？