Блог

Главная - Вопросы по программированию - Как ввести объект в пользовательском интерфейсе материала выберите

Как ввести объект в пользовательском интерфейсе материала выберите

#reactjs #typescript #material-ui

Вопрос:

Я пытаюсь реализовать компонент Select с использованием пользовательского интерфейса материалов reactjs и машинописного текста.

Однако я получаю следующую ошибку при вводе текста:

 Property 'id' does not exist on type 'string'.
Property 'name' does not exist on type 'string'.

Мой Компонент:

 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 amp; {
  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 amp;amp; meta.touched amp;amp; meta.error) {
    configSelect.error = true;
    configSelect.helperText = meta.error;
  }

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

export default SelectWrapper;

Объект options состоит из:

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

Я понимаю, что проблема в типизации объекта, однако я не могу найти правильный способ его ввода.
Как правильно ввести идентификатор и имя, чтобы это сработало?

Комментарии:

1. Могу ли я просто подтвердить, что ваши параметры на самом деле являются объектом, а не массивом объектов?

Ответ №1:

Судя по тому, как это выглядит, options на самом деле представляет собой массив объектов, а не просто объект. Поэтому все, что вам нужно будет сделать, это сопоставить переменную options. В настоящее время вы используете Object.keys, который вы используете, если хотите выполнить итерацию по ключам в объекте.

       {options.map(opt => {
        return (
          <MenuItem key={opt.id} value={opt.id}>
            {opt.name}
          </MenuItem>
        );
      })}
Метки: