Question

我试图用钩子修改redux实现的“登录”组件。但是，出现错误“未从'react-redux'导出'useDispatch'。根据研究，我确实在“ package.json”

中安装的版本中存在问题

这里是不带钩子的代码副本

import React, { useState } from "react";
import { Button, Form, Icon, Input, message } from "antd";
import { connect } from "react-redux";
import {
  hideMessage,
  showAuthLoader,
  userSignIn,
} from "../appRedux/actions/Auth";
import IntlMessages from "../util/IntlMessages";
import CircularProgress from "../components/CircularProgress/index";

const FormItem = Form.Item;


function SignIn(props){

const [showPassword, setShowPassword] = useState(false);

const handleClickShowPassword = () => {
    setShowPassword(!showPassword);
};


const handleSubmit = (e) => {
    e.preventDefault();
    props.form.validateFields((err, values) => {
      if (!err) {       
        props.showAuthLoader();
        props.userSignIn(values);
      }
    });
};

const { getFieldDecorator } = props.form;
const { showMessage, loader, alertMessage } = props;

return (
  <div className="gx-app-login-wrap">
    <div className="gx-app-login-container">
      <div className="gx-app-login-main-content">
        <div className="gx-app-logo-content">
          <div className="gx-app-logo-content-bg">
            <img src="https://via.placeholder.com/272x395" alt='Neature' />
          </div>
          <div className="gx-app-logo-wid">
            <h1><IntlMessages id="app.userAuth.signIn" /></h1>
          </div>
          <div className="gx-app-logo">
            <img alt="example" src={require("assets/images/logo.png")} />
          </div>
        </div>
        <div className="gx-app-login-content">
          <Form onSubmit={handleSubmit} className="gx-signin-form gx-form-row0">
            <FormItem>
              {getFieldDecorator('password', {
                initialValue: "demo#123",
                rules: [{ required: true, message: 'Please input your Password!' }],
              })(
                <Input addonAfter={<Icon type="eye" onClick={handleClickShowPassword} />} type={showPassword ? 'text' : 'password'} placeholder="Password" />
              )}
            </FormItem>

            <FormItem>
              <Button style={{width:"100%"}} type="primary" className="gx-mb-0" htmlType="submit">
                <IntlMessages id="app.userAuth.signIn" />
              </Button>

            </FormItem>
          </Form>
        </div>

        {loader ?
          <div className="gx-loader-view">
            <CircularProgress />
          </div> : null}
        {showMessage ?
          message.error(alertMessage.toString()) : null}
      </div>
    </div>
  </div>
);

}

const WrappedNormalLoginForm = Form.create()(SignIn);


const mapStateToProps = ({ auth }) => {
  const { loader, alertMessage, showMessage, authUser } = auth;
  return { loader, alertMessage, showMessage, authUser }
};

export default connect(mapStateToProps, {
  userSignIn,
  hideMessage,
  showAuthLoader,
})(WrappedNormalLoginForm);

这是带钩子的代码的副本

  import React, { useState } from "react";
  import { Button, Form, Icon, Input, message } from "antd";
  import { hideMessage,showAuthLoader,userSignIn} from "../appRedux/actions/Auth";
  import IntlMessages from "../util/IntlMessages";
  import CircularProgress from "../components/CircularProgress/index";
  import { useDispatch, useSelector } from "react-redux";

   const FormItem = Form.Item;
   function SignIn(props){
   const dispatch = useDispatch();
   const [showPassword, setShowPassword] = useState(false);

   const handleClickShowPassword = () => {
   setShowPassword(!showPassword);
   };


   const handleSubmit = (e) => {
   e.preventDefault();
   props.form.validateFields((err, values) => {
   if (!err) {       
   dispatch(showAuthLoader());
   dispatch(userSignIn(values));
   console.log(values)
   props.showAuthLoader();
   props.userSignIn(values);
   }
   });
   };

   const { getFieldDecorator } = props.form;
   const { showMessage, loader, alertMessage } = props;

   return (
   <div className="gx-app-login-wrap">
    <div className="gx-app-login-container">
      <div className="gx-app-login-main-content">
        <div className="gx-app-logo-content">
          <div className="gx-app-logo-content-bg">
            <img src="https://via.placeholder.com/272x395" alt='Neature' />
          </div>
          <div className="gx-app-logo-wid">
            <h1><IntlMessages id="app.userAuth.signIn" /></h1>
          </div>
          <div className="gx-app-logo">
            <img alt="example" src={require("assets/images/logo.png")} />
          </div>
        </div>
        <div className="gx-app-login-content">
          <Form onSubmit={handleSubmit} className="gx-signin-form gx-form-row0">
            <FormItem>
              {getFieldDecorator('password', {
                initialValue: "demo#123",
                rules: [{ required: true, message: 'Please input your Password!' }],
              })(
                <Input addonAfter={<Icon type="eye" onClick={handleClickShowPassword} />} type= 
             {showPassword ? 'text' : 'password'} placeholder="Password" />
              )}
            </FormItem>

            <FormItem>
              <Button style={{width:"100%"}} type="primary" className="gx-mb-0" htmlType="submit">
                <IntlMessages id="app.userAuth.signIn" />
              </Button>

            </FormItem>
          </Form> 

        </div>

        {loader ?
          <div className="gx-loader-view">
            <CircularProgress />
          </div> : null}
        {showMessage ?
          message.error(alertMessage.toString()) : null} 
      </div>
    </div>
  </div>
  );
  }

 const WrappedNormalLoginForm = Form.create()(SignIn);

 export default WrappedNormalLoginForm;

package.json

 "dependencies": {
 "react-redux": "^5.0.7",
 "react-router-dom": "^4.3.1",
 "react-router-redux": "^5.0.0-alpha.9",
 "redux": "^4.0.0",
 "redux-saga": "^0.16.0"
  },

Answer 1

尝试安装react-redux版本7或更高版本，版本7.1.3对我有用，您可以在以下链接中找到它： https://github.com/Atiqullah-Naemi/React-Hooks-Redux/blob/master/package.json

将类更改为Hooks时，未从“ react-redux”导出错误“ useDispatch”

1 个答案: