带有反应钩子的多个计数器

Question

我正在尝试使用自定义反应钩子为列表中的每个项目创建一个计数器。问题是当我增加或减少一个计数器时，其他计数器的值会同时发生变化。基本上所有的计数器都显示相同的值。这是我的自定义钩子：

import { useState } from "react";

export const useQuantity = (defaultQuantity) => {
const [value, setValue] = useState(defaultQuantity || 1);

const onChange = (e) => {
 if (!+e.target.value >= 1) {
    setValue(1);
    return;
 }
 setValue(+e.target.value);
};

return {
  value,
  setValue,
  onChange,
 };
};

如何在不影响其他计数器的情况下更改计数器的值？

这是我通过项目映射的组件，并为每个项目呈现 QuantityInput 组件。

import { useQuantity } from "../Hook/useQuantity";
import { QuantityInput } from "./QuantityInput";

export const Order = () => {
    const quantity = useQuantity();

    return (
       orders.map((order) => (
          <QuantityInput quantity={quantity} />
       )
    )
  }

这是 QuantityInput 组件：

export const QuantityInput = ({ quantity }) => {

  const decrement = () => {
     quantity.setValue(quantity.value - 1);
  };

  const increment = () => {
    quantity.setValue(quantity.value + 1);
  };

  return (
    <Button
      onClick={decrement}
      disabled={quantity.value === 1}
    >
      -
    </Button>
    <Input {...quantity} />
    <Button onClick={increment}> + </Button>
    );
   };

Answer 1

而不是useQuantity在您的父组件中，您应该在QuantityInput组件中使用它，以便每个组件都保持它们的状态。

export const QuantityInput = () => {
  const quantity = useQuantity(); // Use quantity here, do not need to pass from props

  const decrement = () => {
     quantity.setValue(quantity.value - 1);
  };

  const increment = () => {
    quantity.setValue(quantity.value + 1);
  };

  return (
    <Button
      onClick={decrement}
      disabled={quantity.value === 1}
    >
      -
    </Button>
    <Input {...quantity} />
    <Button onClick={increment}> + </Button>
  );
};