Question

我正在一个React App中工作，React App的形式包含一些下拉组件（来自MS Fabric）。我收到要求将其中某些下拉列表更改为组合框的请求，而MS Fabric组合框软件包不能很好地工作，因此我浏览了互联网，发现了一个名为React-select的软件包。在实际项目中实施该程序包之前，我曾在一个简单的react应用程序中对该程序包进行了测试，并且效果很好。问题是当我尝试在实际项目中实现相同的程序包时。问题是，一旦实现该组件，我的应用程序就会停止工作。如果我删除该行，则该应用将再次运行。

测试应用程序与真实项目之间的主要区别在于，在我正在使用Typescript的项目中。我在项目中还有其他组件，为了进行测试，我删除了所有组件，但问题仍然存在。

在开发人员控制台或react应用程序本身中没有错误消息。

我的实现是这样的：

导入模块： import Select from "react-select";

内部componentDidUpdate：

componentDidUpdate(prevProps: ISearchPersonFormProps): void {
        if (this.props != prevProps) {
            let civilServants = [] as any;

                        this.props.civilServants.forEach(civilServant => {
                civilServants.push({ label: civilServant.PKATBESKR, value: civilServant.Id })
            })
            
             this.setState(
                {
                     civilServants: civilServants
                });

        }

在我的ISearchPersonFormProps中，我具有以下接口：

civilServants: ICivilServant[];

在render方法中，我使用这样的方法： <Select options={this.state.civilServants} />

civilServants状态为IDropdownOptions []类型。

我在Select行之前测试了CivilServants的状态，它包含了我要在Select组件中使用的所有信息。

当我删除此选择行时，该应用程序将再次运行，否则屏幕上不会显示任何内容，并且在开发控制台中也不会显示错误消息。

我的应用程序的一些信息：反应版本：16.11.10 打字稿版本：3.7.2 React-select版本：3.0.8 @ types / react-select版本：3.0.8

任何评论都会有所帮助，谢谢！

更新：这是组件的代码：

import * as React from "react";
import {
  TextField,
  Dropdown,
  IDropdownOption,
  Checkbox,
  PrimaryButton,
  Stack,
  Label
} from "office-ui-fabric-react";
import { ISearchPersonFormProps } from "./ISearchPersonFormProps";
import { ISearchPersonFormState } from "./ISearchPersonFormState";
import Select from "react-select";

export class SearchPersonForm extends React.Component<
  ISearchPersonFormProps,
  ISearchPersonFormState
> {
  constructor(props: ISearchPersonFormProps) {
    super(props);

    this.state = {
      civilServants: [],
      selectedOption: null
    };

    this._handleChange = this._handleChange.bind(this);
  }

  componentDidUpdate(prevProps: ISearchPersonFormProps): void {
    if (this.props != prevProps) {
      let civilServants: any[] = [];

      this.props.civilServants.forEach(civilServant => {
        civilServants.push({
          value: civilServant.Id,
          label: civilServant.PKATBESKR
        });
      });

      this.setState({
        civilServants: civilServants
      });
    }
  }

  private _handleChange = (selectedOption: any) => {
    this.setState(
      {
        selectedOption
      },
      () => console.log(this.state.selectedOption)
    );
  };

  public render(): React.ReactElement<ISearchPersonFormProps> {
    const { selectedOption } = this.state;

    console.log(this.state.civilServants);

    return (
      <div className="search-form">
        <Stack horizontalAlign="start" tokens={{ childrenGap: 20 }}>
          <Stack horizontal tokens={{ childrenGap: 25 }}>
            <Select
              value={selectedOption}
              onChange={this._handleChange}
              options={this.state.civilServants}
            />
          </Stack>
        </Stack>
      </div>
    );
  }
}

这是porp界面的代码：

import { ICivilServant } from "./ICivilServant";

export interface ISearchPersonFormProps {
  civilServants: ICivilServant[];
}

这是状态界面的代码：

export interface ISearchPersonFormState {
  selectedOption: any;
  civilServants: any;
}

ICivilServant是从DB提取数据时使用的接口。

该组件中的控制台日志显示正确地从数据库中获取了数据。但是正如我之前所说，添加选择组件后，应用程序立即停止运行，而没有任何错误消息。

更新2： Package.json

{
  "name": "rk-proper",
  "description": "Displays forms and listings (mostly) for everything regarding the solution.",
  "configurationType": "Web Part",
  "cewpHtmlContent": "<div id=\"proper-webpart-container\"></div>",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.11.0",
    "react-dom": "^16.11.0",
    "react-scripts": "3.2.0"
  },
  "scripts": {
    "dev": "concurrently \"webpack --config webpack.dev.js --watch\" \"gulp serve\"",
    "build": "webpack --config webpack.release.js",
    "build-dev": "webpack --config webpack.dev.js",
    "clean": "gulp clean",
    "configure-sp": "@powershell -NoProfile -ExecutionPolicy Unrestricted -Command ../StartDevelopment.ps1"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/react": "^16.9.11",
    "@types/react-dom": "^16.9.4",
    "@types/react-table": "^6.8.5",
    "@types/react-tabs": "^2.3.1",
    "assets-webpack-plugin": "^3.9.10",
    "awesome-typescript-loader": "^5.2.1",
    "concurrently": "^5.0.0",
    "gulp": "^4.0.2",
    "@types/sharepoint": "^2016.1.6",
    "gulp-clean": "^0.4.0",
    "gulp-serve": "^1.4.0",
    "node-sass": "^4.13.0",
    "source-map-loader": "^0.2.4",
    "typescript": "^3.7.2",
    "webpack-cli": "^3.3.10",
    "webpack-merge": "^4.2.2",
    "office-ui-fabric-react": "^7.54.0",
    "react-table": "^6.10.3",
    "react-tabs": "^3.0.0"
  }
}

Answer 1

检出此示例here。他们使用value来代替defaultValue道具。看一下documentation，然后尝试在代码中进行更改，看看是否是问题所在。

实施反应选择包时遇到问题

1 个答案: