javascript - 带有反应钩子(Hook)的多个计数器

Question

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

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

您应该在 QuantityInput 组件中使用它，而不是在您的父组件中使用 useQuantity，这样每个组件都保持各自的状态。

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>
  );
};