javascript - 为什么当我使用 @react-google-maps/api 时，react-select 会中断？

Question

我现在面临一个奇怪的问题，我正在尝试使用 react-select在我的create-react-app项目显示了应该隐藏的辅助功能文本。

当我点击打开下拉菜单时，我明白了，

这些是我所关注的事情

• yarn add react-select@latest
• import Select from 'react-select'添加到我的导入列表
• <Select options={options} />在我的共享组件列表中

当我使用create-react-app test-react-select创建一个新项目时并按照以下步骤操作，可以实现此目的。

我能否就可能导致问题的原因提供一些建议？代码:

import React, { useState, useRef, forwardRef } from 'react';
import classnames from 'classnames';
import { string, number, shape, oneOfType, arrayOf, func, bool, oneOf } from 'prop-types';
import Select from 'react-select';

const Dropdown = forwardRef(({ label, deafultdropdownValue, deafultdropdownLabel, filterDropDown, dropdownList, textLabel, onClick, postion, name, darkBorder, className, errorMsg }, ref) => {

  return (
    <div className={classnames('dropdown', className, postion)}>
      {textLabel ? <div className="text-label utility-heading-4">{textLabel}</div> : ''}
      <Select options={dropdownList} />
      {errorMsg && <span className="error">
        {errorMsg}
      </span>}
    </div>
  );
});

Dropdown.propTypes = {
  label: string,
  deafultdropdownLabel: string,
  filterDropDown: bool,
  dropdownList: oneOfType([arrayOf(
    shape({
      label: string,
      value: oneOfType([string, number])
    })
  ), arrayOf(string)]),
  textLabel: string,
  onClick: func,
  postion: oneOf(['upward', 'downward']),
  name: string,
  className: string,
  darkBorder: bool,
  errorMsg: string,
  deafultdropdownValue: string
};

Dropdown.defaultProps = {
  filterDropDown: false
};

export default Dropdown;

有一些旧代码未使用，因为我有自己的下拉列表，我试图将其替换为 react-select

这个类没有添加样式。这就是我看到的问题所在。

编辑1。终于找到了问题所在，但没有找到解决方案。问题是当我使用 "react-select": "^3.0.8", 时与 "@react-google-maps/api": "1.7.10", 。知道如何修复它吗？ https://codesandbox.io/s/usegooglemap-repro-x3q37

Answer 1

在Select标签中，您必须使用value属性来存储下拉列表数据的值。

<Select options={options} value={DisplayData}/>

DisplayData 是一个变量，用于存储要选择的下拉列表数据。