在将其他组件设置为在 Nextjs 中列出后，旧组件未定义

Question

我有一个错误，我为此奋斗了 1 周。 我有一个反应表，每一行都是列表中的每个产品

当我更改号码或价格时，最后一列将更改价格并将此价格设置为列出以发送到后端

function CountTotalPrice({
  data,
  setListProductImport,
  listProductImport,
  setNewList,
}) {
  const [price, setPrice] = useState<any>()
  const handleSetPrice = () => {
    const list = listProductImport
    const newList = list.map((item) => {
      if (item.productId == data.productId) {
        const totalPrice = new BigNumber(item.amount).multipliedBy(
          item.costPrice,
        )
        const discountPrice = new BigNumber(item.amount)
          .multipliedBy(item.costPrice)
          .multipliedBy(item.discount)
          .dividedBy(100)
        if (item.discount) {
          const afterPrice = totalPrice.minus(discountPrice)
          setPrice(afterPrice)
        } else {
          setPrice(totalPrice)
        }
      }
      return item
    })
  }

  useEffect(() => {
    handleSetPrice()
  }, [listProductImport])

  useEffect(() => {
    if (price) {
      const list = listProductImport
      const newList = list.map((item) => {
        if (item.productId === data.productId) {
          return { ...item, price: price.toFixed() }
        }
        return item
      })
      console.log("newList", newList)

      setNewList(newList)
    }
  }, [price])

  return (
    <div className="py-2 text-center text-white rounded-md cursor-pointer bg-successBtn">
      {new BigNumber(price).toFormat(0)} đ
    </div>
  )
}

我正在使用

console.log("newList", newList)

并在最后看到 totalPrice 可以添加到列表中，但如果我有超过 2 个项目，则之前的旧项目将设置为未定义。像这样：

任何人都可以帮助我。非常感谢。