允许打字稿编译器仅对一个反应状态属性调用 setState [英] allow typescript compiler to call setState on only one react state property

问题描述

我在一个项目中使用 Typescript 和 React.Main 组件通过此接口获取传递状态.

I'm using Typescript with React for a project. The Main component gets passed state with this interface.

interface MainState {
  todos: Todo[];
  hungry: Boolean;
  editorState: EditorState;  //this is from Facebook's draft js
}

但是，下面的代码(仅摘录)无法编译.

However, the code below (only an excerpt) won't compile.

class Main extends React.Component<MainProps, MainState> {
  constructor(props) {
    super(props);
    this.state = { todos: [], hungry: true, editorState: EditorState.createEmpty() };
  }
  onChange(editorState: EditorState) {
    this.setState({
      editorState: editorState
    });
  }
}

编译器抱怨说，在 onChange 方法中，我只尝试为一个属性设置状态，属性 todos 和属性 hungry 在 { editorState: EditorState;} 类型中缺失.换句话说，我需要在 onChange 函数中设置所有三个属性的状态才能使代码编译.为了编译它，我需​​要做

The compiler complains that, in the onChange method where I am only trying to setState for one property, the property todos and the property hungry is missing in type { editorState: EditorState;}. In other words, I need to set the state of all three properties in the onChange function to make the code compile. For it to compile, I need to do

onChange(editorState: EditorState){
  this.setState({
    todos: [],
    hungry: false,
    editorState: editorState
  });
}

但是没有理由在代码中的这一点设置 todos 和 hungry 属性.在 typescript/react 中仅对一个属性调用 setState 的正确方法是什么?

but there's no reason to set the todos and the hungry property at this point in the code. What is the proper way to call setState on only one property in typescript/react?

推荐答案

编辑

react 的定义已更新，setState 的签名现在是:

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

其中 Pick 是 Typescript 2.1 中添加的内置类型:

Where Pick<S, K> is a built-in type which was added in Typescript 2.1:

type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
}

有关详细信息，请参阅映射类型.
如果您仍然遇到此错误，那么您可能需要考虑更新您的 React 定义.

See Mapped Types for more info.
If you still have this error then you might want to consider updating your react definitions.

我也面临同样的问题.

我设法解决这个烦人问题的两种方法是:

The two ways I manage to get around this annoying issue are:

(1) 强制转换/断言:

(1) casting/assertion:

this.setState({
    editorState: editorState
} as MainState);

(2) 声明接口字段为可选:

(2) declaring the interface fields as optional:

interface MainState {
    todos?: Todo[];
    hungry?: Boolean;
    editorState?: EditorState;
}

如果有人有更好的解决方案，我很乐意知道！

If anyone has a better solution I'd be happy to know!

虽然这仍然是一个问题，但有两个关于可以解决这个问题的新功能的讨论:
部分类型(现有类型的可选属性)
和
Object.assign 和 React 组件 setState() 更准确的类型

While this is still an issue, there are two discussions on new features that will solve this problem:
Partial Types (Optionalized Properties for Existing Types)
and
More accurate typing of Object.assign and React component setState()

这篇关于允许打字稿编译器仅对一个反应状态属性调用 setState的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！