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

Question

我目前面临一个奇怪的问题，我正在尝试在我的create-react-app项目中使用react-select ，它显示了应该隐藏的可访问性文本。

当我点击打开下拉菜单时，我看到了，

这些是我关注的东西

• 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替换

此 class 未添加 styles。 这就是我看到的问题所在。

编辑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是一个变量，用于存储下拉列表数据，该数据将发送至 select。

Answer 2

如果有人使用<LoadScript/>而遇到相同类型的问题，则使用 useLoadScript 或者如果您从 useLoadScript 配置中删除preventGoogleFontsLoading: true效果很好。

有关更多详细信息，请关注此线程。 https://spectrum.chat/react-google-maps/general/react-google-maps-api-braking-react-select~86032a91-5a4b-4dbb-99fa-b1e1f7000e98