通过一组对象进行映射将更新我所有的反应开关组件，而它应该只更新一个 onChange

Question

我正在尝试创建一个 table 可以编辑营业时间的地方。我正在使用 react-switch 中的 Switch 组件并映射到一周中的几天。问题是每次我点击一个 switch 元素时，所有开关元素都在更新，但是，我只希望我点击的那个元素更新。

react-switch 文档需要一个 onChange 和一个 checked 道具，看来我无法通过 onClick.

这是我要渲染的元素：

import Switch from "react-switch";
import  { regularHours }from '../../../helpers/momentFunctions';
import { FormGroup, Input } from "reactstrap";
import { Styles } from './Styles/EditDaysOfWeekStyles';

export const EditDaysOfWeek = () => {
    const [checked, setChecked] = useState(true);
    const handleChange = () => {
        setChecked(!checked);
    }
    return (
      <div>
        {regularHours.map(({ i, day }) => (
          <Styles>
              <div key={i}>{day}</div>
              <FormGroup key={i}>
                <Input type="text" placeholder="8:00AM" />
              </FormGroup>
              <p>-</p>
              <FormGroup key={i}>
                <Input type="text" placeholder="8:00PM" />
              </FormGroup>
              <Switch
                checked={checked}
                onChange={handleChange}
                defaultValue={true}
                onColor="#2bbbae"
                offColor="#f15a29"
              />
            </Styles>
          ))}
      </div>
    );
  };

这是数据结构：

export const sunday = moment.weekdays(0);
export const monday = moment.weekdays(1);
export const tuesday = moment.weekdays(2);
export const wednesday = moment.weekdays(3);
export const thursday = moment.weekdays(4);
export const friday = moment.weekdays(5);
export const saturday = moment.weekdays(6);

export const regularHours = [
    {
      day: sunday,
      index: 0,
    },
    {
      day: monday,
      index: 1,
    },
    {
      day: tuesday,
      index: 2,
    },
    {
      day: wednesday,
      index: 3,
    },
    {
      day: thursday,
      index: 4,
    },
    {
      day: friday,
      index: 5,
    },
    {
      day: saturday,
      index: 6,
    }
  ];

如果您需要完整视图 - 我制作了一个沙盒供您在其中玩： https://codesandbox.io/s/dank-leftpad-lt7y2?fontsize=14&hidenavigation=1&theme=dark

Answer 1

您将相同的 checked 值和相同的 handleChange 函数传递给每个 <Switch />，而不区分它们。

如果您不希望每个 <Switch /> 都具有相同的值，则需要为每个 checked 状态设置一个单独的 checked 状态。

我对您的沙箱进行了一些更改，使其按预期工作。（所有编辑都在 Day.js 中）

通过一组对象进行映射将更新我所有的反应开关组件，而它应该只更新一个 onChange

mapping through an array of objects will update all of my react-switch components when it should only update one onChange

onchange

reactjs

array.prototype.map