Ошибка: аргумент типа '{field1: Date; поле 2: дата; } 'нельзя назначить параметру типа' IMyInterfaceState - PullRequest
0 голосов
/ 29 марта 2020

Мои интерфейсы (. Tsx) приведены ниже:

export interface IMyInterfaceProps{
}

export interface IMyInterfaceState{
    fields: {
        ID:string,
        Name:string,
        field1: Date,
        field2: Date,
        date: Date
    },
    errors: {
        Name: string,
      }
}

Мой Класс (. Tsx) is:

class MyClass extends Component<IMyInterfaceProps, IMyInterfaceState>{
   form:any;
   constructor(props:any){
      super(props);
      this.state = {
      fields: {
        ID:'',
        Name:'',
        field1: new Date(),
        field2: new Date(),
        date: new Date()
      },
      errors: {
          Name: '',
      }
    };
   }

   change = (e:any) => {
      this.setState({
        [e.target.name]: e.target.value} as Pick<IMyInterfaceProps, keyof IMyInterfaceState>);
   };

   handleChange = (date: Date) => {
      this.setState({
         field1: date,  //Here I'm getting this error
         field2: date
      });
    };

  render(){
      <div>
             <DatePicker id='field1' className="form-control" onChange={this.handleChange}
                     placeholderText="Select a date" ></DatePicker>
       </div>
  }
}

Мои зависимости от пакета . json:

{
  "name": "react-ds-poc",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.26",
    "@types/react-dom": "^16.9.0",
    "bootstrap": "^4.4.1",
    "css-loader": "^3.4.2",
    "react": "^16.13.1",
    "react-datepicker": "^2.14.1",
    "react-dom": "^16.13.1",
    "react-form-input-validation": "^2.0.3",
    "react-scripts": "3.4.1",
    "typescript": "^3.8.3"
  }

Я испробовал несколько вариантов решения этой проблемы отсюда , и я могу решить ее для моего события change , но для события handleChange я получаю следующую ошибку:

Аргумент типа ' {field1: Date; поле 2: дата; } 'нельзя назначить параметру типа' IMyInterfaceState | ((prevState: Readonly, props: Readonly) => IMyInterfaceState | ... еще 1 ... | null) | Выбрать <...> | null '.
Литерал объекта может указывать только известные свойства, а' field1 'не существует в типе' IMyInterfaceState | ((prevState: Readonly, props: Readonly) => IMyInterfaceState | ... еще 1 ... | null) | Выберите <...> '.

Пожалуйста, помогите мне избавиться от этой ошибки.

1 Ответ

1 голос
/ 29 марта 2020

В настоящее время вы заменяете весь свой объект состояния содержимым только вашего свойства fields. Вам нужно установить состояние с помощью объекта, который выполняет контракт IMyInterfaceState. Не совсем уверен, но вы можете сойти с рук

this.setState({
  fields: {
    field1: date,
    field2: date
  }
});

, но вам, возможно, придется определить ID, Name, date и, возможно, errors.Name тоже.

...