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

Я добавил метод 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'.

React Typescript: аргумент типа &apos;{ [x: число]: любой; }&apos; нельзя присвоить параметру типа

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;

Вы используете какую-либо библиотеку пользовательского интерфейса? если да, посмотрите тип элемента ввода. в противном случае нет необходимости удалять встроенный тип, просто event:React.FormEvent, который является синтетическим событием, содержит все типы для целевого имени и целевого значения.

Amir-Mousavi 17.04.2019 16:47
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
6
1
14 362
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Форма вашего состояния такова:

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

Можете ли вы объяснить "... это.состояние"

Jodi 27.01.2021 21:08

@Jesse, конечно, ... this.state расширит / деструктурирует объект состояния, тогда вы добавите больше объектов в деструктурированный объект / измените его. Наконец, вы берете все это и присваиваете текущему состоянию с помощью this.setState.

Amartya Mishra 29.01.2021 04:12

Все, что вам нужно сделать, это указать, какой элемент вы хотите обновить/изменить.

this.setState({value:value});
type ItemState = {
    value?: string;// The state I want to update
};

#В вашем случае будет

this.setState({playerName : new_value});

Другие вопросы по теме