如何在 react + typescript 中为单个状态变量设置状态？

Question

当我点击按钮时，“isLoading”设置为true，页面中出现加载gif，这里处理简单的点击功能；

private clickFunction(e): void {
    this.state.isLoading=true; ..

所以我希望这个加载 gif 出现在页面中；

<div style={{"display":this.state.isLoading?"block":"none"}}><i className="fa fa-spinner fa-spin"></i></div>  

但它不起作用..这里有什么问题？因为如果 isLoading 属性的初始值设置为 true，则 gif 似乎在 plageload 上，所以我认为状态不更新渲染还是？

已编辑： 当我尝试仅更新状态 ts 编译器的一个属性时，会抛出此异常； 这里穿什么？

export interface IWebPartState {
  status: string;
  Name: string;
  isLoading:boolean;
}
export default class Contact extends React.Component<IContactProperties, IWebPartState> { ...

Answer 1

这似乎已经改变了...

如果您查看 React 类型定义（index.d.t，React 16），您会看到 Typescript 中的 setState 方法签名是：

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

S是我们的组件状态，在你的情况下是IWebPartState

查看this SO question to understand what it means，但简而言之：您不必将接口属性设为可选，但您可以只将其中的一部分传递给setState

Answer 2

您以错误的方式设置状态， 而不是this.state.isLoading=true，您应该使用setState 设置状态，如下所示，

this.setState({
    isLoading: true
});

详细了解 state here 和 setState here。

编辑：当您将 reactjs 与 typescript 一起使用时，您需要在类型界面中将属性设为可选，您可以使用 ? 来做到这一点。在可选属性部分阅读更多信息here

interface IGifLoadingState {
    isLoading?: boolean;
    status?: string;
}

在声明属性可选后，打字稿将允许您在状态中设置任何单独的属性。