當我使用@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