Question

实际上，我使用的是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>
  );
});

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

下面是我的新代码：

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

它表明调度不存在。而且我不能使用this.props.username从状态获取用户名。

Answer 1

您似乎已经编写了一个功能组件，但是它们通常没有状态（因此您无法设置其状态）。改为编写类组件。

请参见the React documentation for the syntax differences。

如果您使用的是React的最新版本，则可以使用带有State Hook的功能组件。

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

1 个答案: