嗨，我是react js的新手，我想知道为什么我的组件渲染了两次（useeffect运行了两次）。我试着删除strict模式，但它只渲染了一次，但即使这样，我也不明白为什么count显示为01，而不仅仅是1。如果我添加事件处理程序，组件会中断，我会得到newarray[id][1]-1未定义（即使我没有单击-或+，函数也会运行）

import React, { useEffect, useState } from "react";
import { useOutletContext } from "react-router-dom";

function ShoppingCart(prop) {

  const [productstobuy, setProducts] = useState([]);
  const [count, setCount] = useState([0])
  console.log(productstobuy)
/*
   const handlePlusMinus = (sign,id) => {
    console.log("i'm in")
     const newarray = [...productstobuy]
     console.log(newarray)
     if (sign === "+") {
       newarray[id][1] = newarray[id][1]+1
     } else if ((newarray[id][1]-1) >= 1) {
      newarray[id][1] = newarray[id][1]+1
     }
     setProducts(newarray);

    }
 */

  const allItems = useOutletContext()

  useEffect(() => {
    setCount(count + 1)
    console.log("called")
    let toadd = allItems.filter((elem, index) => { return index === prop.index })
    console.log(toadd);
    let productexsist = productstobuy.filter((elem) => { return elem[0] === toadd })
    console.log(productexsist.length)

    if (!productexsist.length) {
      console.log([(allItems.filter((elem, index) => { return index === prop.index }))[0], 1])
      setProducts(oldArray => [...oldArray, [toadd[0], 1]]);
      console.log(productstobuy)

    } else {
      console.log("wrong")
    }

  }, [prop.index])

  return (
    <div>
      {count}
      {console.log(productstobuy)}
      {productstobuy.length > 0 ? productstobuy.map((product) => {
        console.log(product[1])
        return (<div className="product" id={prop.index}>{product[0]}<div><button id={prop.index} /*onClick={handlePlusMinus("-",prop.index)}*/>-</button><input type="number" value={product[1]} /><button id={prop.index} /*onClick={handlePlusMinus("-",prop.index)}*/>+</button></div></div>)

      }) : null}
    </div>

  );

}

export { ShoppingCart }