React Typescript：'{ [x: number]: any; 类型的参数}' 不可分配给类型参数答案

【问题标题】：React Typescript: Argument of type '{ [x: number]: any; }' is not assignable to parameter of typeReact Typescript：'{ [x: number]: any; 类型的参数}' 不可分配给类型参数
【发布时间】：2019-09-07 19:54:52
【问题描述】：

我在项目（React、TS、Mobx）中添加了 onChange 方法，但出现错误：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 | 类型的参数（（上一个状态：只读，道具：只读） => IAddPlayerFormState |挑选 |空） |选择<...> |空'。

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;

【问题讨论】：

您在使用任何 UI 库吗？如果是这样，请查看那里的输入元素类型。否则不需要破坏内联类型，只需 event:React.FormEvent 这是一个合成事件，包含目标名称和目标值的所有类型

标签： javascript reactjs typescript mobx

【解决方案1】：

您需要告诉 Typescript 您的对象将具有来自 IAddPlayerFormState 的一个或多个属性，但不一定是所有属性。你可以这样做：

public onChange(event: { target: { name: any; value: any; }; }) {
  const newState = { [name]: value } as Pick<IAddPlayerFormState, keyof IAddPlayerFormState>;
  this.setState(newState);
  console.log("On Change!");
}

【讨论】：

【解决方案2】：

使用这种语法为我消除了错误：

const myFunction = (e) => {
    return this.setState({...this.state, [e.target.id]: e.target.value});
}

【讨论】：

你能解释一下“...this.state”
@Jesse 当然，...this.state 将扩展/解构状态对象，然后您将更多对象添加到/修改解构对象。最后，您使用 this.setState 将所有这些分配给当前状态。

【解决方案3】：

你的状态形状是这样的：

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

打字稿应该没问题。顺便说一句，此代码将不起作用。更改输入名称:)。我希望这个答案很清楚，如果不是，我会编辑它。

【讨论】：

【解决方案4】：

您需要做的就是指定要更新/更改的项目

this.setState({value:value});

type ItemState = {
    value?: string;// The state I want to update
};

#你的情况是

this.setState({playerName : new_value});

【讨论】：