Ошибка: аргумент типа '{field1: Date; поле2: Дата; } 'не может быть назначен параметру типа' IMyInterfaceState

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

export interface IMyInterfaceProps{
}

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

Мой Класс (.tsx):

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>
  }
}

Мои зависимости от package.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: Только для чтения, props: Только для чтения) => IMyInterfaceState | ... еще 1 ... | null) | Выбрать ‹...> | null ».
Литерал объекта может указывать только известные свойства, а« field1 »не существует в типе« IMyInterfaceState | ((prevState: Только для чтения, props: Только для чтения) => IMyInterfaceState | ... еще 1 ... | null) | Выберите ‹...> '.

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


reactjs typescript javascript react-tsx typescript3.0
person user1547554    schedule 28.03.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

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

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

person Michael Landis    schedule 29.03.2020
comment
Спасибо, это помогло, насколько вы правы, я должен включить все свойства, присутствующие в поле. - person user1547554; 29.03.2020
comment
Милая! Если вы отметите мой ответ как принятый, это порадует меня и будущих респондентов. :-) - person Michael Landis; 29.03.2020
comment
Эта ошибка времени компиляции исчезла, однако я получаю так много других ошибок, когда выбираю дату с помощью DatePicker. - person user1547554; 29.03.2020
comment
Я ищу эти ошибки, приму их как ответ. :) - person user1547554; 29.03.2020
comment
О, Боже. Радости программирования! - person Michael Landis; 29.03.2020