问题很简单，您将breakfast数组作为依赖项，useEffect并且useEffect您正在设置早餐数组本身。现在，由于在组件内部声明了 const 早餐数组，因此每次都会生成对它的新引用，并且由于 useEffect 将数组设置为状态，它会重新渲染，并且在下一次重新渲染时，breakfast由于引用已更改，因此对数组的比较失败。

解决方案很简单，你不需要在组件中有 const 数组，也不需要使用 useEffect

const breakfast = [
    {
      id: 0,
      name: "Sandwich de jamón y queso",
      price: '35',
      img: "https://i.ibb.co/ynC9xHZ/sandjc.png",

    },
    {
      id: 1,
      name: "Jugo Natural",
      price: '15',
      img: "https://i.ibb.co/8mrd4MK/orangejuice.png",
    },
    {
      id: 2,
      name: "Café americano",
      price: '20',
      img: "https://i.ibb.co/nsj1GL0/americancoffe.png",
    },
    {
      id: 3,
      name: "Café con leche",
      price: '28',
      img: "https://i.ibb.co/GRPBm7j/coffeandmilk.png",
    }
  ];

const BreakfastComponent = () => {

  const [stateProduct, setStateProduct] = useState(breakfast);


  return (

      <section className="databreakfast">
        {stateProduct.map((element, item) =>
          <ButtonsBComponent
            key={item}
            {...element}

          />
        )}
        </section>



  )
};

export default BreakfastComponent;

useEffect的第二个参数是要观察的状态/钩子数组，当它们发生变化时，运行效果。由于您breakfast是一个常量，我猜您只想将原始文件stateProduct设为breakfast. 因此，不要使用[]作为默认值，而是使用breakfast.

const [stateProduct, setStateProduct] = useState(breakfast);

此外，const breakfast ...在你的react功能组件之外声明可能是个好主意，这样它就不会在每次重新渲染时重新声明它。