React.js中setState函数“ this”的范围问题

Question

Actually I'm using umi instead of react. And I found an error of the scope problem of 'this.setState' in function handleUsername.

I have tried to replace 'this.setState' with 'setState' and it shows can not found function setState.

here is my code:

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

I want to change state in this component. Please help me.

here is my new code below:

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

It shows dispatch does not exist. And I can not use this.props.username to get username from state.

Answer 1

You appear to have written a Function Component, but they don't typically have states (so you can't set their states). Write a Class Component instead.

See the React documentation for the syntax differences .

If you are using a very recent version of React, then you could use a Function Component with a State Hook instead.