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

你正在以错误的方式设置状态，您应该使用<script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>设置状态，而不是this.state.isLoading=true，

setState

详细了解州here和setState here。

编辑：当您将reactjs与typescript一起使用时，您需要在类型界面中使属性可选，您可以使用this.setState({ isLoading: true });执行此操作。在可选属性部分here

中阅读有关它的更多信息

声明属性可选后，typescript将允许您设置状态中的任何单个属性。

Answer 2

这似乎已经发生了变化......

如果查看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

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

2 个答案: