AnnaSearl/annar

Cascade value 指定当前选中的条目 时,下面的列表显示错误

Opened this issue · 3 comments

<Cascade value={selectedValue} changeOnSelect key={'branSelect' + updateStatus} name="品类" options={listData} onChange={handleBasicChange} />

1、 下面的列表还是从头开始的。
onchang 获得 的value值 最多只能到三个
2、options 通过set 列表不刷新 ,只有改变key 值时才会刷新。

没太理解您的意思呢,能提供一个复现demo么

没太理解您的意思呢,能提供一个复现demo么

一样有这个问题,改变 key 应该是强制触发 re-render

const RegionCascade = ({
  onChange: parentOnChange,
  value: parentValue,
  parser = defaultRegionCascadeParser,
  formatter = defaultRegionCascadeFormatter,
  ...rest
}: Partial<Omit<CascadeProps, 'onChange' | 'value'>> & {
  value?: string;
  onChange?: (
    value: string,
    selectedOptions?: OptionProps[],
    isLast?: boolean,
  ) => void;
  parser?: Parser<string | string[], string[]>;
  formatter?: Formatter<string[], string>;
}) => {
  const [options, setOptions] = useState<OptionProps[]>([]);
  const [_, _onChange] = useState<string>(parentValue || '');

  const value = useMemo(() => {
    const output = parser(parentValue);
    // parentValue 被更新后,传入到 Cascade 中的 value 也一样被更新,但是 Cascade 受控情况不对。选中的选项没有被清空。
    console.log('value:', output);
    return output;
  }, [parentValue]);

  useEffect(() => {
    const onLoad = async () => {
      const output = await getFullRegionOptionsFromStore();
      setOptions(output);
    };
    onLoad();
  }, []);

  const onChange = useCallback((value, selectedOptions, isLast) => {
    const _value = formatter(value);
    _onChange(_value);
    parentOnChange && parentOnChange(_value, selectedOptions, isLast);
  }, []);

  return (
    <>
      {options.length !== 0 && (
        <Cascade
          {...rest}
          value={value}
          onChange={onChange}
          options={options}
        />
      )}
    </>
  );
};

export default RegionCascade;

没太理解您的意思呢,能提供一个复现demo么

const val = changeOnSelect ? value : localValue;

问题在这里,changeOnSelect = false 时候,存的是 localValue