Я добавил метод 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;
};
}
Argument of type '{ [x: number]: any; }' is not assignable to parameter of type 'IAddPlayerFormState | ((prevState: Readonly, props: Readonly) => IAddPlayerFormState | Pick | null) | Pick<...> | null'.
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.info('On Change!');
}
public handleSubmit = () => {
console.info('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;



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Форма вашего состояния такова:
interface IAddPlayerFormState {
playerName: string;
isDisabled: boolean;
}
и вы вызываете setState с этим:
{any: any}
Вы можете изменить только значения: playerName и isDisabled, а не любые. Если вы перепишете сигнатуру функции как
public onChange(event: { target: { name: "playerName"|"isDisabled"; value: any; }; })
или лучше
public onChange(event: { target: { name: keyof IAddPlayerFormState ; value: any; }; })
это должно быть хорошо для машинописного текста. Кстати, этот код не будет работать. Изменить имя ввода :). Я надеюсь, что этот ответ ясен, если нет, я отредактирую его.
Вам нужно сообщить Typescript, что ваш объект будет иметь одно или несколько свойств из IAddPlayerFormState, но не обязательно все свойства. Вы можете сделать это следующим образом:
public onChange(event: { target: { name: any; value: any; }; }) {
const newState = { [name]: value } as Pick<IAddPlayerFormState, keyof IAddPlayerFormState>;
this.setState(newState);
console.info("On Change!");
}
Использование этого синтаксиса избавило меня от ошибки:
const myFunction = (e) => {
return this.setState({...this.state, [e.target.id]: e.target.value});
}
Можете ли вы объяснить "... это.состояние"
@Jesse, конечно, ... this.state расширит / деструктурирует объект состояния, тогда вы добавите больше объектов в деструктурированный объект / измените его. Наконец, вы берете все это и присваиваете текущему состоянию с помощью this.setState.
Все, что вам нужно сделать, это указать, какой элемент вы хотите обновить/изменить.
this.setState({value:value});
type ItemState = {
value?: string;// The state I want to update
};
#В вашем случае будет
this.setState({playerName : new_value});
Вы используете какую-либо библиотеку пользовательского интерфейса? если да, посмотрите тип элемента ввода. в противном случае нет необходимости удалять встроенный тип, просто
event:React.FormEvent, который является синтетическим событием, содержит все типы для целевого имени и целевого значения.