設置 useState() ReactJs 時出現無限循環錯誤

Question

我有 mutliSelect，我的情況是：當 Value 屬性為 [] 時（multiSelect 組件獲取此屬性），也將我的 useState 設置為 []。

我試着寫這樣的東西：

const [selected, setSelected] = useState([]);

useEffect(() => {
  setSelected([]);
}, [Value]);

<Select
  style={style}
  maxTagCount={0}
  maxTagPlaceholder={maxTagPlaceholder}
  mode="multiple"
  placeholder={placeholder}
  showSearch

  value={selected} // here I tried to put the Value but not working well

  onSelect={(val) => onSelectValueMultiSelect(val, selected, setSelected, options)}
  onDeselect={(val) => onDeselectValueMultiSelect(val, selected, setSelected)}>
  {childrenOptions}
</Select>

但我得到無限循環錯誤。

值數組包含 arrays 表單過濾器數據，然后單擊“重置過濾器”按鈕，我想重置我的多選字段。

我認為問題在於當 setSelected([]) 調用它時，它會再次渲染 Value，因此 useEffect 會一次又一次地調用。

Answer 1

這是我的多選組件：

import React, { useEffect, useState } from 'react';
import './MultiSelect.scss';

import { maxTagPlaceholder, onSelectValueMultiSelect, onDeselectValueMultiSelect } from '../Services';
import { Select, Checkbox } from 'antd';

const MultiSelect = ({ options, style, onChangeHandle, placeholder, Value }) => {
  const [selected, setSelected] = useState([]);
  const [childrenOptions, setChildrenOptions] = useState([]);
  const { Option } = Select;
  const children = [];

  useEffect(() => {
    options.forEach((option) => {
      children.push(
        <>
          <Option key={option.value}>
            <Checkbox className="multi-select-checkbox" checked={selected.some((x) => x === option.value)} />
            {option.value}
          </Option>
        </>
      );
    });
    setChildrenOptions(children);
  }, [selected]);

useEffect(() => {
  onChangeHandle(selected);
}, [selected]);

useEffect(() => {
  setSelected([]);
}, [Value]);

  return (
    <Select
      style={style}
      maxTagCount={0}
      maxTagPlaceholder={maxTagPlaceholder}
      mode="multiple"
      placeholder={placeholder}
      showSearch
      value={selected}
      onSelect={(val) => onSelectValueMultiSelect(val, selected, setSelected, options)}
      onDeselect={(val) => onDeselectValueMultiSelect(val, selected, setSelected)}>
      {childrenOptions}
    </Select>
  );
};

export default MultiSelect;