多重反击与反应钩

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

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

这就是数量输入组件。

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

解决方案:

取而代之的是 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>
  );
};

给TA打赏
共{{data.count}}人
人已打赏
未分类

集成测试与功能测试

2022-9-9 16:41:18

未分类

完善此类型脚本的'groupBy'功能。

2022-9-9 16:41:20

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索