Несколько счетчиков с реагирующими крючками

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

Answer 2

Хук, который вы реализовали, содержит одно значение состояния и будет достаточным только для него.

Решением здесь является реализация компонента, использующего этот хук. Если у вас есть компонент, вы можете отобразить столько экземпляров, сколько захотите

Также вы можете просто реализовать компонент вместо пользовательского хука

import { useState } from "react";

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

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

   return (
      <div>
          <div>{value}</div>
          <input value={value} onChange={onChange} />
      </div>

    )
};


const Parent = ({arr}) => {
   return arr.map(item => <QuantityInput defaultQuantity={item.defaultQuantity} />)
}