如何在带有 Typescript 的 ReactJs 中为 state 赋值和使用 setState答案

【问题标题】：How to assign a value to state and use setState in ReactJs with Typescript如何在带有 Typescript 的 ReactJs 中为 state 赋值和使用 setState
【发布时间】：2017-03-02 16:15:30
【问题描述】：

我过去在几个测试项目中使用过 state 和 setState，但现在我正在开发一个新项目，当我执行 this.state = new ProductDto("some product name"); 时，我收到错误“Cannot convert type ProductDto to type {(): any;(): any}”。

当我也做this.setState(product); 时，我得到一个错误：

Supplied parameter do not match any signature of call target because no overload accepts one parameters.Candidates are: K<any>() => (void) K<any>() => (void)

我的代码如下所示。

class ProductDto {
  constructor(name?: string) {
    this.name = name;
  }
  name: string;
}

class Product extends React.Component<any, ProductDto> {
  constructor() {
    super();
    this.state = new ProductDto("some product name");
  }
  handleChangeProduct(product: ProductDto) {
    this.setState(product);
  }
  ...
}

我正在使用typescript: "^2.2.1", @types/react: "^15.0.13" and react": "^15.4.2"

setState 的定义在 index.d.ts 文件中如下所示

setState<K extends keyof S>(f: (prevState: S, props: P) => Pick<S, K>, callback?: () => any): void;

setState<K extends keyof S>(state: Pick<S, K>, callback?: () => any): void;.

任何有关如何使这些工作的帮助将不胜感激。谢谢。

【问题讨论】：

使用类作为状态是非典型的，而且 React 处理状态的方式可能存在问题......而不是只使用接口和对象字面量。您可以使用{ product: ProductDto } 作为您的状态。
向this.state提供一个普通对象。
@Aaron 我也尝试过使用接口和对象文字，但没有帮助。
@Mudi “它没有帮助”是什么意思？它应该可以工作。
@Aaron 我认为这与新的打字版本有关。我刚刚添加了一个旧版本（v0.14）的类型，它可以工作。它的定义是setState(state: S, callback?: () => any): void;。在 absoluteTyped 网站上的新反应类型版本中，setState 也有一些更严格的东西，但我不知道如何让它仍然工作。

标签： reactjs typescript

【解决方案1】：

React 状态必须是一个对象。 setState 接受一个对象或一个返回对象作为第一个参数的函数。也就是说，状态对象可以包含类（即函数）。

在您的情况下，您可以按如下方式设置状态

this.state = { product: new ProductDto("some product name") };

然后更新它

this.setState({ product });

您可以在此处阅读有关反应状态的更多信息：https://facebook.github.io/react/docs/state-and-lifecycle.html

【讨论】：