React 在組件中為相同的 prop 顯示兩個不同的值

Question

我有一個接收 elementIndex 道具的組件，如下所示：

import React from "react";

// Polaris
import { Checkbox, Stack, TextField } from "@shopify/polaris";

// Redux
import { useReduxDispatch, useReduxSelector } from "@app/hook";
import { setNewMenuConfigElement, selectNewMenuConfigElement } from "@slices/menuConfigSlice";

// Components
import { CollapsibleSettingsCard } from "@components/CollapsibleSettingsCard";
import { IconSelector } from "@components/IconSelector";

// Props
type MenuElementSettingsProps = {
  elementIndex: number;
};

export const MenuElementSettings: React.FC<MenuElementSettingsProps> = ({ elementIndex }) => {
  const dispatch = useReduxDispatch();
  const newMenuConfigElement = useReduxSelector(selectNewMenuConfigElement(elementIndex));

  const handleTextChange = (value: string, id: string) => {
    console.log("handleTextChange: ", elementIndex);
    dispatch(
      setNewMenuConfigElement({
        index: elementIndex,
        element: {
          ...newMenuConfigElement,
          [id]: value,
        },
      })
    );
  };

  const handleCheckboxChange = (checked: boolean, id: string) => {
    console.log("handleCheckboxChange: ", elementIndex);
  };

  return (
    <CollapsibleSettingsCard
      id={`menu-element-${elementIndex}-settings`}
      title={`Element ${elementIndex + 1} Settings`}
    >
      <Stack vertical>
        <Stack vertical>
          <Stack.Item>
            <IconSelector elementIndex={elementIndex} />
          </Stack.Item>
          <Stack.Item>
            <TextField
              autoComplete="off"
              id="name"
              label="Name"
              value={newMenuConfigElement.name}
              onChange={handleTextChange}
            />
          </Stack.Item>
          <Stack.Item>
            <TextField
              autoComplete="off"
              id="link"
              label="Link"
              value={newMenuConfigElement.link}
              onChange={handleTextChange}
            />
          </Stack.Item>
          <Stack.Item>
            <Checkbox
              label="Open link in new tab"
              id="openInNewTab"
              checked={newMenuConfigElement.openInNewTab}
              onChange={handleCheckboxChange}
            />
          </Stack.Item>
        </Stack>
      </Stack>
    </CollapsibleSettingsCard>
  );
};

該組件的父級是：

<Stack.Item>
  <MenuElementSettings elementIndex={0} />
</Stack.Item>
<Stack.Item>
  <MenuElementSettings elementIndex={1} />
</Stack.Item>
<Stack.Item>
  <MenuElementSettings elementIndex={2} />
</Stack.Item>
<Stack.Item>
  <MenuElementSettings elementIndex={3} />
</Stack.Item>

當我調用 handleTextChange 函數時，elementIndex 屬性被正確接收並更新了商店中的正確元素。 但是當我調用handleCheckboxChange函數時，elementIndex prop 始終為0。它們是同一組件上的兩個不同函數，但其​​中一個接收到的prop 錯誤。 我一生中從未見過這樣的事情

這是我調用函數時的控制台輸出

handleTextChange:  2
handleCheckboxChange:  0
handleTextChange:  1
handleCheckboxChange:  0

如果有人可以幫助我，我會很高興

Answer 1

顯然這是因為我傳遞給 Checkbox 元素的“id”道具。 id 是硬編碼的，並且在 dom 樹中的所有組件上都相同

<Checkbox
  label="Open link in new tab"
  id="openInNewTab"
  checked={newMenuConfigElement.openInNewTab}
  onChange={handleCheckboxChange}
/>

盡管 TextField 組件在 dom 樹上也有多次硬編碼 id，但它們並沒有產生這種行為。

<TextField
  autoComplete="off"
  id="name"
  label="Name"
  value={newMenuConfigElement.name}
  onChange={handleTextChange}
/>
<TextField
  autoComplete="off"
  id="link"
  label="Link"
  value={newMenuConfigElement.link}
  onChange={handleTextChange}
/>

我認為這是 Shopify Polaris 庫的一個錯誤，需要修復