React选择库在渲染时使我的页面崩溃

Question

我目前正试图将react select实现到我正在开发的web应用程序中，但无论何时渲染，它都会导致整个react应用程序崩溃，并出现缩小错误#130-元素类型无效：应为字符串(用于内置组件(或类/函数(用于复合组件(，但得到：object。

按程序生成这些选择元素的代码看起来像这样的

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组件之外，它还可以完美地与所有组件配合使用，所以我很困惑我可能做错了什么。为了以防万一，我也尝试将导入作为一个去结构化对象，但仍然遇到了同样的问题。当我console.log out选择器时，我得到了一个看起来与任何其他react fragment对象相同的对象，并且我正在使用webpack绑定我的文件，我相信它在构建时配置正确，并且除了这个问题之外，还可以完美地工作。欢迎提出任何建议。

编辑：创建了一个代码笔来展示问题(https://codepen.io/AugustTGuenther/pen/abmJEpx)，在这里得到了一个不同的错误，并从react错误中得到了更多的描述，但仍然不想渲染，即使使用静态模拟数据作为选项。我想，如果有人能指出我在那里做错了什么，那么在我的实际代码中也会出现同样的问题——匹配的反应版本和对实际代码的反应选择版本。

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关于这个问题的答案(而不是"可接受的"答案(：未捕获错误：不变冲突：元素类型无效：应为字符串(用于内置组件(或类/函数，但得到：对象

与react select无关——它们只是碰巧是我使用的react组件库，它坏了。