我的 Dropdown 和 Label 组件（部分工作）有什么问题？

Question

我的 Dropdown 和 Tag 组件有什么问题？从下拉列表中选择我的选项后，标签变为空，但在我的控制台日志中我可以看到正确的选项已填充。

import Select from "react-select";
import Tag from "./Tag";

export default function Dropdown({
  className,
  style,
  options,
  styleSelect,
  value,
  setValue,
  isMulti = false
}) {
  const styles = {
    select: {
      width: "100%",
      maxWidth: 200
    }
  };

  function changeSelect(option) {
    setValue(option.value);
  }

  return (
    <div style={style} onClick={(e) => e.preventDefault()}>
      {value && isMulti === false ? (
        <Tag
          selected={value}
          setSelected={setValue}
          styleSelect={styleSelect}
        />
      ) : (
        <Select
          className={className}
          style={styles.select}
          value={value}
          onChange={changeSelect}
          options={options}
          isMulti={isMulti}
        />
      )}
    </div>
  );
}

export default function Tag({ selected, setSelected, styleSelect }) {
  const backgroundColor = styleSelect?.(selected?.label) ?? "blue";
  return (
    <div style={{..}} >
      {selected.label}
      <button style={{...}} onClick={() => setSelected(null)}>
        x
      </button>
    </div>
  );
}

这是code

这是我有的/我想要的：

Answer 1

调试后我发现您访问的道具不正确

在您正在渲染的第 17 行的 Tag 组件中

{selected.label}

将其替换为

{selected}

我的 Dropdown 和 Label 组件（部分工作）有什么问题？

What is wrong with my Dropdown and Label components (working partially)?

reactjs

react-select

dropdown

react-hooks