当父状态改变时，常量数组作为 reactjs 中的道具的无限变化

Question

所以我有这个自定义组件：

export interface PickerProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'onChange' | 'name' | 'onInput'> {
    onChange?: OnChangeEventHandler<HTMLSelectElement>,
    onChangeValue?: OnChangeValueHandler,
    onInput?: OnInputEventHandler<HTMLSelectElement>,
    onInputValueChange?: OnInputChangeHandler,
    name: string,
    label: string,
    emptyOpt?: boolean,
    optGroups: {
        optTitle?: string,
        options: (Omit<OptionHTMLAttributes<HTMLOptionElement>, 'value'> & {
            value: string
        })[]
    }[]
}

export const Picker = ({
    disabled = false,
    autoComplete = "autoComplete",
    onChange = () => { },
    onChangeValue = () => { },
    onInput = () => { },
    onInputValueChange = () => { },
    autoFocus = false,
    size,
    name,
    form = '',
    optGroups = [],
    label,
    emptyOpt = true,
}: PickerProps) => {
    const [pickerValue, setPickerValue] = useState<string>();
    const pickerRef = useRef<HTMLSelectElement>(null);
    const changeHandler = (e: ChangeEvent<HTMLSelectElement>) => {
        const targetValue = e.target.value;
        onChange(e, name);
        onChangeValue(targetValue, name);
        // setPickerValue(targetValue);
    }

    const onInputHandler = (e: FormEvent<HTMLSelectElement>) => {
        onInput(e, name);
        //@ts-ignore
        onInputValueChange(e.target.value, name);
        //@ts-ignore
        setPickerValue(e.target.value, name);
    }

    useEffect(() => {
        const selectedValuesArr = [...optGroups].map(optGroup => optGroup.options
            .filter(opt => opt.selected ?? false)
            .map(sOPT => sOPT.value))
            .reduce((pv, cv) => [...pv, ...cv], []);
        const defValue = selectedValuesArr[0] ?? '';
        setPickerValue(defValue);
        setTimeout(() => pickerRef.current?.dispatchEvent(new Event('input', { bubbles: true })), 2);
    }, [optGroups, name]);

    return <>
        <div className="picker-box" tabIndex={0}>
            <span>
                {label}
            </span>
            <select
                ref={pickerRef}
                disabled={disabled}
                autoFocus={autoFocus}
                size={size}
                name={name}
                form={form}
                autoComplete={autoComplete}
                onChange={changeHandler}
                multiple={false}
                value={pickerValue}
                onInput={onInputHandler}
            >
                {emptyOpt && (
                    <option value="">انتخاب کنید</option>
                )}
                {optGroups.map((optGroup, key) => (
                    <optgroup key={key} label={optGroup.optTitle ?? 'انتخاب کنید'}>
                        {optGroup.options.map((opt, index) =>

                            <option
                                className={pickerValue === opt.value ? ' selected' : ''}
                                key={index}
                                disabled={opt.disabled}
                                value={opt.value}
                            >
                                {opt.label ?? ''}
                            </option>
                        )}
                    </optgroup>
                ))}
            </select>
        </div>
    </>;
};

这是我如何使用的示例

                <Picker
                    emptyOpt={false}
                    label="تخفیف نقدی"
                    name="cashFlag"
                    optGroups={[
                        {
                            options: [
                                { value: 'true', label: 'دارد', selected: true },
                                { value: 'false', label: 'ندارد' },
                            ]
                        }
                    ]}
                    onInputValueChange={formDataHandler}
                />

这是我的表单处理程序：

    const formDataHandler = useCallback((value: string, name: string) => {
            setFormState(fs => {
                const temp = { ...fs };
                temp[name] = value;
                return { ...temp };
            });
    }, []);

optGroups 属性的数组用于渲染选择器组件。 问题是，每当执行作为表单数据更改处理程序的formDataHandler 函数时。选择器组件检测 optGroups 道具已更改。虽然不是。 分配给 Picker 组件的数组是不变的，不会被改变（除了两个） 更重要和奇怪的是。它们都按预期运行，直到父组件的状态发生更改！这显然与 Picker 组件无关。

我需要帮助找出为什么 optGroups 在父状态发生更改时被检测为新数组，而给定数组没有被更改。 （这导致他们调用他们的 changeHandler 并开始无限循环） 首先我认为这是我的问题：

ReactJS - When I change a state, props change too

但是，经过多年的努力，我确信在 Picker 组件内部，没有更改作为 optGroups 给出的数组。

感谢您的帮助。

Answer 1

这个问题是每当父组件每次渲染创建一个新引用时，您都会创建一个新的optGroups 数组。

<Picker
  emptyOpt={false}
  label="تخفیف نقدی"
  name="cashFlag"
  // you are creating a brand new array here each time on re-render. 
  // The reference of the array here changes whenever this component re-renders.
  optGroups={[
    {
      options: [
        { value: "true", label: "دارد", selected: true },
        { value: "false", label: "ندارد" },
      ],
    },
  ]}
  onInputValueChange={formDataHandler}
/>;

在父组件之外或在单独的文件中声明一个常量optGroupsOptions 并使用它

const optGroupsOptions = [
  {
    options: [
      { value: "true", label: "دارد", selected: true },
      { value: "false", label: "ندارد" },
    ],
  },
];

// Use the optGroupsOptions 

<Picker
emptyOpt={false}
label="تخفیف نقدی"
name="cashFlag"
optGroups={optGroupsOptions}
onInputValueChange={formDataHandler}
/>

另一种方法是使用 useMemo 挂钩确保引用不会在引用之间发生变化。

const memoizedOptGroups = useMemo(
  () => [
    {
      options: [
        { value: "true", label: "دارد", selected: true },
        { value: "false", label: "ندارد" },
      ],
    },
  ],
  []
);

现在使用这个memoizedOptGroups

<Picker
  emptyOpt={false}
  label="تخفیف نقدی"
  name="cashFlag"
  optGroups={memoizedOptGroups}
  onInputValueChange={formDataHandler}
/>;