React Typescript：类型'{[x：number]的参数：任意； }'不能分配给类型的参数

Question

我在项目（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]类型的参数：任意； }'不可分配给   'IAddPlayerFormState类型的参数| （（prevState：   只读，道具：只读）   => IAddPlayerFormState |选择| 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.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;

Answer 1

使用这种语法为我摆脱了错误：

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

Answer 2

您的州形状是：

import Data.Char (ord, chr)

--lowercase letter to int conversion
let2int :: Char -> Int
let2int c = ord c - ord 'a'

--int to lowercase letter conversion
int2let :: Int -> Char
int2let n = chr(ord 'a' + n)

text2ints :: String -> [Int]
text2ints xs = map (let2int) xs

ints2text :: [Int] -> String
ints2text xs = map (int2let) xs

vigenere_encrypt :: String -> String -> String
vigenere_encrypt key plaintext = zipWith merge plaintext (ints2text n)
  where n = map (`mod` 26) (zipWith (+)  keyCycle intPlainText)
        keyCycle = (cycle(text2ints key))
        intPlainText = text2ints plaintext
        merge a b = case a of
          ' ' -> ' '
          otherwise -> b

main = do
  print $ vigenere_encrypt "abc" "hello rita"

您正在使用以下命令调用setState：

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

您只能更改以下值：playerName和isDisabled都不能。如果将函数签名重写为

{any: any}

或更佳

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

对于打字稿应该没问题。顺便说一句，此代码将无法正常工作。更改输入名称:)。我希望这个答案很清楚，否则我将对其进行编辑。

Answer 3

您需要告诉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!");
}

Answer 4

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

this.setState({value:value});

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

#在你的情况下是

this.setState({playerName : new_value});