Reactjs 反应器更新显示

新手问题

我正在用Typescript学习ReactJS，我来自AngularJS背景，试图忘却AngularJS

下面的代码运行并显示props.compiler。当我点击H1时，处理程序启动，但React代码不会像AngularJS中那样更新显示

我错过了什么

export interface IHelloProps {
  compiler: string;
  framework: string;
}

export class Hello extends React.Component<IHelloProps> {
  constructor(props: IHelloProps) {
    super(props);
    this.x = props.compiler;
  }

  private x: string;

  get Name(): string {
    return this.x;
  }

  set Name(value: string) {
    this.x = value;
  }

  render() {
    return <h1 onClick={this.handler}>Hello from {this.Name}!</h1>;
  }

  handler = async (t: any) => {
    const resp = await fetch('https://api.github.com');
    const data = await resp.json();
    this.Name = data.current_user_url;
  };
}

没有，您需要在组件的状态对象中使用：

// A bit more React-Class oriented example
class App extends React.Component {
  state = {
    currentUser: this.props.compiler
  };

  handler = async t => {
    const resp = await fetch('https://api.github.com');
    const data = await resp.json();
    this.setState({ currentUser: data.current_user_url });
  };

  render = () => {
    const { currentUser } = this.state;
    return <h1 onClick={this.handler}>Hello from {currentUser}!</h1>;
  };
}

试着深入阅读这一节

没有，您需要在组件的状态对象中使用：

// A bit more React-Class oriented example
class App extends React.Component {
  state = {
    currentUser: this.props.compiler
  };

  handler = async t => {
    const resp = await fetch('https://api.github.com');
    const data = await resp.json();
    this.setState({ currentUser: data.current_user_url });
  };

  render = () => {
    const { currentUser } = this.state;
    return <h1 onClick={this.handler}>Hello from {currentUser}!</h1>;
  };
}

试着深入阅读这一节

---

在React中，您不会像在setter函数中那样设置值

React通过比较虚拟DOM异步呈现DOM

因此，您需要使用setState来更新DOM的状态

您可以在代码中添加状态并将其传递给React组件

handler = async (t: any)=> {
  const resp = await fetch('https://api.github.com');
  const data = await resp.json();
  this.Name=data.current_user_url;
  this.setState({name:data.current_user_url}); //name being the state variable
}

---

希望能有帮助

在React中，您不会像在setter函数中那样设置值

React通过比较虚拟DOM异步呈现DOM

因此，您需要使用setState来更新DOM的状态

您可以在代码中添加状态并将其传递给React组件

handler = async (t: any)=> {
  const resp = await fetch('https://api.github.com');
  const data = await resp.json();
  this.Name=data.current_user_url;
  this.setState({name:data.current_user_url}); //name being the state variable
}

---

希望能有帮助

TypeScript的界面纯粹是用于类型检查。不应直接引用其任何属性

相反，我建议您为您的状态创建一个接口，该接口保存来自您的获取请求的当前用户url的值

然后，在单击处理程序上，通过调用以使用更新的状态重新呈现组件来更新状态。有一件重要的事情需要注意，那就是你们应该

为了在组件上完全实现TypeScript的类型检查功能，您应该使用提供React.component及其prop和state类型参数

我已经修改了您的代码，使您的组件符合TypeScript。一定要注意新的IHelloState接口

export interface IHelloProps { 
  compiler: string; 
  framework: string; 
}

export interface IHelloState { 
  name: string; 
}

export class Hello extends React.Component<IHelloProps, IHelloState> {

  constructor(props: IHelloProps) {
    super(props);
    this.state = {
      name: '',
    };
  }


  handler = async (t: React.MouseEvent<HTMLButtonElement>)=> {
    const resp = await fetch('https://api.github.com');
    const data = await resp.json();
    this.setState({
      name: data.current_user_url,
    });
  }

  render() {
    const { name } = this.state;

    return <h1 onClick={this.handler}>
             Hello from {name}
        </h1>;
  }

}

---

您可以阅读更多关于使用React和TypeScript的信息。

TypeScript的界面纯粹是用于类型检查的。不应直接引用其任何属性

相反，我建议您为您的状态创建一个接口，该接口保存来自您的获取请求的当前用户url的值

然后，在单击处理程序上，通过调用以使用更新的状态重新呈现组件来更新状态。有一件重要的事情需要注意，那就是你们应该

为了在组件上完全实现TypeScript的类型检查功能，您应该使用提供React.component及其prop和state类型参数

我已经修改了您的代码，使您的组件符合TypeScript。一定要注意新的IHelloState接口

export interface IHelloProps { 
  compiler: string; 
  framework: string; 
}

export interface IHelloState { 
  name: string; 
}

export class Hello extends React.Component<IHelloProps, IHelloState> {

  constructor(props: IHelloProps) {
    super(props);
    this.state = {
      name: '',
    };
  }


  handler = async (t: React.MouseEvent<HTMLButtonElement>)=> {
    const resp = await fetch('https://api.github.com');
    const data = await resp.json();
    this.setState({
      name: data.current_user_url,
    });
  }

  render() {
    const { name } = this.state;

    return <h1 onClick={this.handler}>
             Hello from {name}
        </h1>;
  }

}

---

您可以阅读有关使用React和TypeScript的更多信息。

是否有任何错误或只是显示不更新。。您是否尝试过console.logprops.compiler数据？会发生什么？有一个称为state的概念，您需要在构造函数中添加this.state，当您在this.handler函数中应用this.setState时，它将重新呈现您的组件，从而更新Display。您应该将name变量存储在state中，然后使用setState更改其值。这是React-away，将触发不使用getter和setter的组件重新命名。是否有任何错误或只是显示不会更新。。您是否尝试过console.logprops.compiler数据？会发生什么？有一个称为state的概念，您需要在构造函数中添加this.state，当您在this.handler函数中应用this.setState时，它将重新呈现您的组件，从而更新Display。您应该将name变量存储在state中，然后使用setState更改其值。这是React-away，将触发一个组件重新命名，而不使用getter和setter.ah，所以技巧是state和setState。我认为AngularJS有一些魔力，我需要在ReactJS中处理自己。AngularJS在内部通过在绑定或使用的指令上设置观察者来实现，一旦值变脏，它就会触发更新事件并更新值：啊，所以诀窍是state和setState。我认为AngularJS有一些魔力，我需要在ReactJS中处理自己。AngularJS在内部通过在绑定或使用的指令上设置观察者来实现这一点，一旦值变脏，它就会触发更新事件并更新值：因此设置状态和状态就是值流动的地方。我去读一下。@IanVink宾果！此外，您应该阅读有关TypeScript的内容，以及如何将其与React一起使用，以及接口的使用方式。@IanVink刚刚对我的代码做了一些更改，因为我对接口犯了一些错误。此外，我还为click事件处理程序添加了正确的类型。使用any实际上是不好的做法，所以setState和state是值流动的地方。我去读一下。@IanVink宾果！此外

---

注意，您应该仔细阅读有关TypeScript的内容，以及如何将其与React一起使用，以及接口的使用方式。@IanVink刚刚对我的代码做了一些更改，因为我对接口犯了一些错误。此外，我还为click事件处理程序添加了正确的类型。实际上，使用any.setState和state是数据流的关键。谢谢，没错。这就是为什么我直接向你的处理函数提供了一个提示，所有的魔法都将在这里发生。事实上，setState也接受回调函数，因为setState异步运行，React不能保证您的更新状态会立即反映出来。所以有时候你也需要使用这个回调函数。祝你学习顺利。我一直在这里帮助您：setState和state是数据流的关键。谢谢，没错。这就是为什么我直接向你的处理函数提供了一个提示，所有的魔法都将在这里发生。事实上，setState也接受回调函数，因为setState异步运行，React不能保证您的更新状态会立即反映出来。所以有时候你也需要使用这个回调函数。祝你学习顺利。我一直在这里帮助你：