Reactjs 中 setState 函数'this'的范围问题

Question

实际上我使用的是umi而不是react。我在函数句柄用户名中发现了"this.setState"的范围问题的错误。

我试图将"this.setState"替换为"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>
  );
});

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

这是我下面的新代码：

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);

它显示调度不存在。而且我不能使用这个.props.username 从状态获取用户名。

Answer 1

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

有关语法差异，请参阅 React 文档。

如果你使用的是最新版本的 React，那么你可以使用带有状态钩子的函数组件。