reactjs - 从 MaterialUI 包中键入 Select 对象时出现问题

问题描述

我正在尝试使用 typescript/reactjs 实现 MaterialUI Select 组件。但是，我在实例化 Select 时遇到了问题。

我收到输入错误：

Type 'Courses' is missing the following properties from type 'Options[]': length, pop, push, concat, and 28 more.  TS2740

我不明白为什么会发生这个错误，我什至没有它，出于什么原因我需要包含 Courses 类型，如果我作为参数传递给 select 的是一个名为“课程”，并带有属性 id 和 name。我不明白。

选择组件：

import React from 'react';
import { TextField, MenuItem, TextFieldProps } from '@material-ui/core';
import { useField, useFormikContext } from 'formik';

interface Options {
  id: number;
  name: string;
}

type ITextFieldProps = TextFieldProps & {
  name: string;
  options: Options[];
};

const SelectWrapper: React.FC<ITextFieldProps> = ({
  name,
  options,
  ...otherProps
}) => {
  const { setFieldValue } = useFormikContext();
  const [field, meta] = useField(name);

  const handleChange = (evt: React.ChangeEvent<any>) => {
    const { value } = evt.target;
    setFieldValue(name, value);
  };

  const configSelect = {
    ...field,
    ...otherProps,
    select: true,
    fullWidth: true,
    onChange: handleChange,
    error: false,
    helperText: '',
  };

  if (meta && meta.touched && meta.error) {
    configSelect.error = true;
    configSelect.helperText = meta.error;
  }

  return (
    <TextField variant="outlined" {...configSelect}>
      {options.map(opt => {
        return (
          <MenuItem key={opt.id} value={opt.id}>
            {opt.name}
          </MenuItem>
        );
      })}
    </TextField>
  );
};

export default SelectWrapper;

我打电话的位置选择：

          <Grid item xs={12}>
            <Select
              name="course"
              label="Selecione um Curso"
              options={courses}
              size="small"
            />
          </Grid>

课程对象： 我从 API 获取此对象，并通过选择组件中的课程参数传递它。

{ 
    {
        "id": 10053,
        "name": "Direção Defensiva – Controle de Acidentes Ambev - 2021 (Distribuição)"
    },
    {
        "id": 10052,
        "name": "Segurança na Operação de Empilhadeira – 2021"
    }
}

标签： reactjstypescriptmaterial-ui

reactjs - 从 MaterialUI 包中键入 Select 对象时出现问题

问题描述

解决方案

推荐阅读