React Typescript: Аргумент типа '{[x: number]: любой; } 'не присваивается параметру типа - PullRequest
Новая
       16

React Typescript: Аргумент типа '{[x: number]: любой; } 'не присваивается параметру типа

0 голосов
/ 17 апреля 2019

Я добавил метод onChange в свой проект (React, TS, Mobx), но получаю сообщение об ошибке: Argument of type '{ [x: number]: any; }' is not assignable to parameter of type

Я новичок в TypeScript и не уверен, почему это происходит.В чем может быть проблема? 

(parameter) event: {
    target: {
        name: any;
        value: any;
    };
}

Аргумент типа '{[x: number]: any;} 'нельзя назначить параметру типа' IAddPlayerFormState |((prevState: Readonly, props: Readonly) => IAddPlayerFormState | Pick | null) |Выбрать <...> |null '.

enter image description here

import React, { Component } from 'react';
import ViewStore from '../../../store/ViewStore';
import { TextField } from './../../../utils';

interface IAddPlayerFormProps {
  viewStore?: ViewStore; // Optional ViewStore
}

interface IAddPlayerFormState {
  playerName: string;
  isDisabled: boolean;
}

class AddPlayerForm extends Component<IAddPlayerFormProps, IAddPlayerFormState> {
  constructor(props: Readonly<IAddPlayerFormProps>) {
    super(props);

    this.state = {
      isDisabled: false,
      playerName: '',
    };
  }

  public onChange(event: { target: { name: any; value: any; }; }) {
    this.setState({ [event.target.name]: event.target.value });
    console.log('On Change!');
  }

  public handleSubmit = () => {
    console.log('On submit!');
  }

  public render() {
    const { isDisabled } = this.state;

    return (
      <form onSubmit={this.handleSubmit}>
        <TextField
          type="text"
          name="name"
          value={name}
          placeholder="Add player"
          onChange={this.onChange}
          disabled={isDisabled}
        />

        <input type="submit" />
      </form>
    );
  }
}

export default AddPlayerForm;

Ответы [ 2 ]

1 голос
/ 17 апреля 2019

Вы должны сообщить Typescript, что ваш объект будет иметь одно или несколько свойств из IAddPlayerFormState, но не обязательно все свойства. Вы можете сделать это так: 

public onChange(event: { target: { name: any; value: any; }; }) {
  const newState = { [event.target.name]: event.target.value } as Pick<IAddPlayerFormState, keyof IAddPlayerFormState>;
  this.setState(newState);
  console.log("On Change!");
}
1 голос
/ 17 апреля 2019

Ваша государственная форма такова: 

interface IAddPlayerFormState {
  playerName: string;
  isDisabled: boolean;
}

и вы вызываете setState с этим: 

{any: any}

Вы можете изменить только значения: playerName и isDisabled not any. Если переписать сигнатуру функции как 

public onChange(event: { target: { name: "playerName"|"isDisabled"; value: any; }; })

или лучше 

public onChange(event: { target: { name: keyof IAddPlayerFormState ; value: any; }; })

это должно быть нормально для машинописи. Кстати, этот код не будет работать, хотя. Изменить имя ввода :). Я надеюсь, что этот ответ ясен, если нет, я отредактирую это.

...