如何更改React Dropdown的标题？

Question

我正在创建自定义下拉列表，其中按钮（Trigger）充当下拉触发器。在这里，我试图将下拉标题更改为任何选定选项的名称。为此，我将新选择的值存储在selectedOption中，并使用它们替换标题。但是，收到以下错误：Cannot read property 'label' of undefined。

如何解决并使下拉菜单正常工作？

非常感谢任何启发！谢谢

const Dropdown = props => {
  const { onChange, label, disabled } = props;
  const options = [
    { value: '0', label: 'All Flavour' },
    { value: '1', label: 'Strawberry' },
    { value: '2', label: 'Rum Raisin' },
    { value: '3', label: 'Hazelnut' },
    { value: '4', label: 'Chocochip' },
    { value: '5', label: 'Coffee' },
  ];

  const [open, setOpen] = useState(false);

  const handleTriggerClick = useCallback(() => setOpen(prev => !prev), []);
  const handleChange = useCallback(
    newValue => {
      if (!disabled) {
        onChange(newValue);
        setOpen(false);
      }
    },
    [onChange]
  );

const selectedOption = options.find(option => option.label === label);
  const displayMenu = open && !disabled;

  return (
    <>
      <Container>
        <OutletIcon />
        <Trigger
          disabled={disabled}
          title={selectedOption.label || ''}
          onClick={handleTriggerClick}
        >
          <TriggerText>{selectedOption.label || ''}</TriggerText>
          <SortIcon />
        </Trigger>
        <DropdownMenu isDisplayed={displayMenu}>
          {options.map(option => {
            const isSelected = option.label === label;
            const otherProps = {};
            if (!isSelected) {
              otherProps.onClick = () => handleChange(option.label);
            }

            return (
              <DropdownMenuItem
                key={option.value}
                title={option.label}
                selected={isSelected}
                {...otherProps}
              >
                <DropdownMenuItemText onClick={handleTriggerClick}>
                  {option.label}
                </DropdownMenuItemText>
                <GreenCheckIcon />
              </DropdownMenuItem>
            );
          })}
        </DropdownMenu>
      </Container>
    </>
  );
};

这里是道具宣言

Dropdown.defaultProps = {
  disabled: false,
  onChange: () => {},
  label: '',
};

Dropdown.propTypes = {
  disabled: PropTypes.bool,
  onChange: PropTypes.func,
  label: PropTypes.string,
};

Answer 1

在第一次加载时，您有一个空的label道具，导致options.find()返回未定义，因此selectedOption变为未定义。

更改该行后退到带有空标签的对象上：

const selectedOption = options.find(option => option.label === label) || {label: '', value: ''};

现在，如果label属性为空，则selectedOption将安全地为{label: '', value: ''}。