Javascript '的范围问题；这'；Reactjs中setState函数的构造

实际上我用的是umi而不是react。我在函数handleUsername中发现了“this.setState”范围问题的一个错误

我试图用“setState”替换“this.setState”，它显示找不到函数setState

这是我的密码：

import React from 'react';
import styles from './index.css';
// import router from 'umi/router';
import {Input, Button} from 'antd';
import { connect } from 'dva';
import { Dispatch } from 'react';

// const namespace = 'global';

interface DisType{
  dispatch: Dispatch<{}>;
}

export default connect ()(( props:DisType ) => {
  const handleClick = () =>{
    // router.push('/homepage/');
    //test dva
    props.dispatch({
      type: 'global/setUserInfo',
      payload: {        
        username: '1111',
        password: '222',
      }
    });
    props.dispatch({
      type:'global/login',
    });

  }
  const handleUsername = (event: any) => {
    this.setState({
      username: event.target.value,
    })
  }
  return (
    <div className={styles.normal}>
      <div className={styles.welcome} />
      <h1 className={styles.title}>login</h1>
      <ul className={styles.list}>
        <li><label>username:</label><Input className={styles.input} onChange={handleUsername} placeholder="username"/></li>
        <li><label>password:</label><Input className={styles.input} placeholder="password"/></li>
        <li>
          <Button type="primary" shape="round" onClick={handleClick}>login</Button>
        </li>
      </ul>
    </div>
  );
});

从“React”导入React；
从“/index.css”导入样式；
//从“umi/路由器”导入路由器；
从“antd”导入{Input，Button}；
从“dva”导入{connect}；
从“react”导入{Dispatch}；
//常量名称空间='全局'；
接口类型{
调度：调度；
}
导出默认连接（）（（props:DisType）=>{
常量handleClick=（）=>{
//router.push（'/homepage/'）；
//测试dva
道具调度({
键入：“全局/setUserInfo”，
有效载荷：{
用户名：“1111”，
密码：“222”，
}
});
道具调度({
类型：'global/login'，
});
}
常量handleUsername=（事件：任意）=>{
这是我的国家({
用户名：event.target.value，
})
}
返回(
登录

用户名：
密码：

登录


);
});

我想更改此组件中的状态。请帮帮我

下面是我的新代码：

import React from 'react';
import styles from './index.css';
// import router from 'umi/router';
import {Input, Button} from 'antd';
import { connect } from 'dva';

class Index extends React.Component {
  handleClick = () =>{
    this.props.dispatch({
      type: 'global/setUserInfo',
      payload: {        
        username: '1111',
        password: '222',
      }
    });
    this.props.dispatch({
      type:'global/login',
    });
  }
  handleUsername = (event: any) => {
    this.setState({
      username: event.target.value,
    })
  }
  public render() {
    return (
      <div className={styles.normal}>
        <div className={styles.welcome} />
        <h1>智能教室系统</h1>
        <h1 className={styles.title}>login</h1>
        <ul className={styles.list}>
          <li><label>username:</label><Input className={styles.input} onChange={this.handleUsername} placeholder="username"/></li>
          <li><label>password:</label><Input className={styles.input} placeholder="password"/></li>
          <li>
            <Button type="primary" shape="round" onClick={this.handleClick}>login</Button>
          </li>
        </ul>
      </div>
    );
  }
}
function mapStateToProps(state:any) {
  return {
    username: state.global.username,
    password: state.global.password,
  };
}
export default connect (mapStateToProps)(Index);

从“React”导入React；
从“/index.css”导入样式；
//从“umi/路由器”导入路由器；
从“antd”导入{Input，Button}；
从“dva”导入{connect}；
类索引扩展了React.Component{
handleClick=（）=>{
这是我的道具({
键入：“全局/setUserInfo”，
有效载荷：{
用户名：“1111”，
密码：“222”，
}
});
这是我的道具({
类型：'global/login'，
});
}
handleUsername=（事件：任意）=>{
这是我的国家({
用户名：event.target.value，
})
}
公共渲染（）{
返回(
智能教室系统
登录

用户名：
密码：

登录


);
}
}
函数MapStateTops（状态：任意）{
返回{
用户名：state.global.username，
密码：state.global.password，
};
}
导出默认连接（MapStateTops）（索引）；

它表明分派不存在。

---

我不能使用this.props.username从state获取用户名。

您似乎编写了一个函数组件，但它们通常没有状态（因此无法设置它们的状态）。改为编写一个类组件

看

---

如果您使用的是最新版本的React，则可以使用带有的函数组件。

请使用演示问题的命令更新您的问题，最好是使用堆栈片段的可运行命令（

[]

工具栏按钮）。堆栈代码段支持React，包括JSX。如何将函数传递到函数

connect（）

returns used中？除非它使其成为

React.Component

（或子类）实例的一部分，否则它不会有

setState

。此外，由于您正在为该函数使用箭头函数，

此

将被关闭（

函数中的此

与

导出之前的此

相同），而不是由函数调用方式设置。这看起来可能是个问题，可能是个问题，但如果没有更多信息，就不可能说。在功能组件中没有

这个

这样的东西，因为它们不是

类

没有这个我怎么能使用dispatch？你能给出一个示例代码吗？@DavidChan-更改为类组件，这样你就可以使用

这个
，但我不能使用分派。。。这表明分派是没有定义的。@DavidChan-如果您在更改为类组件时破坏了其他内容，那么在没有看到新代码的情况下很难判断您做错了什么。你可能应该问一个新问题。（或者谷歌如何在类组件中使用道具）。我已经更新了关于这个问题的新代码，你能帮我找到错误吗？