React-select 庫在渲染時使我的頁面崩潰

Question

我目前正在嘗試將 react-select 實現到我正在開發的 web 應用程序中，但是每當它被渲染時，它會使整個反應應用程序崩潰，並出現最小化錯誤 #130 - 元素類型無效：預期為字符串（用於內置組件）或類/函數（用於復合組件）但得到：object。

程序生成這些 select 元素的代碼如下所示

let optionObjects = await retrievePropertyOptions(null, null, null, property, true)
                    let options = this.listOptionConstructor(optionObjects, true)
                    //options returns an array of objects with value and label properties
                    let selector =
                        <React.Fragment key={number}>
                            <label className="cssclasses"
                                for={`select-custom-${name}`}>
                                {name}</label>
                            <ReactSelect options={options} onChange={(selected) => {
                                this.setState({
                                    [`multi-selector${number}`]: selected
                                })}}
                                value = {this.state[`multi-selector${number}`]}
                             />
                        </React.Fragment>

我的導入只是const ReactSelect = require('react-select')

有誰知道我為什么會遇到這個錯誤？ 它與除了 react-select 組件之外的所有東西都完美配合，所以我很困惑我可能做錯了什么。 我嘗試將導入作為解構的 object 以防萬一，但仍然遇到了同樣的問題。 當我 console.log out 選擇器時，我得到一個 object，它看起來與任何其他反應片段 object 相同，我正在使用 webpack 捆綁我的文件，我相信除了這個問題之外，它的配置是正確的。 任何建議表示贊賞。

編輯：創建了一個代碼筆來展示這個問題（ https://codepen.io/AugustTGuenther/pen/abmJEpx ），在這里得到一個不同的錯誤，並從反應錯誤中得到更多的描述，但即使使用 static 模擬數據仍然不想渲染作為選項。 我想如果有人能指出我做錯了什么，那在我的實際代碼中也會出現同樣的問題 - 匹配反應版本和反應選擇版本到實際代碼。

Answer 1

您可以嘗試此代碼片段，其中數據提取在 useEffect 中完成，然后將值設置為 state 並傳入 react-select 的選項。 這應該主要是創建的選項的問題。 如果您可以將數據獲取邏輯移動到 useEffect 掛鈎，那也很好。

import * as React from 'react';
import ReactSelect from 'react-select';

// mockData is just a mock.It should be coming from the server.
const mockData = [
  { value: 'some value', label: 'some label 1 ' },
  { value: 'some value', label: 'some label 2' },
  { value: 'some value', label: 'some label 3' },
];

export default function App() {
  const [response, setResponse] = React.useState([]);
  const retrievePropertyOptions = () => {
    return new Promise((resolve) => {
      resolve(mockData);
    });
  };

  React.useEffect(() => {
    async function getProperties() {
      const result = (await retrievePropertyOptions()) as any;
      setResponse(result);
    }
    getProperties();
  }, []);

  return (
    <div>
      <ReactSelect options={response} />
    </div>
  );
}

Answer 2

我的問題最終是 webpack/babel 弄亂了默認導出/導入，請參閱 jackypan1989 對此問題的回答（不是“已接受”的回答）： 未捕獲錯誤：不變違規：元素類型無效：預期字符串（用於內置組件) 或類/函數但得到：object

與 react-select 無關——它們恰好是我正在使用的反應組件庫，它被破壞了。