在React Hook里面使用mobx的用法

在React Hook里面使用mobx的用法

import React ,{useState}from 'react';
import {Form, Input, Button, message} from 'antd';
import Axios from '../../utils/axios'//封装的axios
import {inject,observer} from "mobx-react";//引入mobx里的inject，observer
import Api from '../../api/index'//接口
import './editpassword.css'
import {useHistory} from "react-router-dom";




const Editpassword = (({ user }) => {

    const userAr = user.user//第一个user是文件名，第二个是存储数据的key
    const arr = []
    // const [arr, setCount] = useState(0)
    userAr.forEach((item,index)=>{
        arr.push(
            item.Password,item.id
        )
    })//用forEach取出需要的数据
    const id = arr[1]
    console.log(arr)
        const layout = {
            labelCol: {
                span: 4,
            },
            wrapperCol: {
                span: 16,
            },
        };
        const tailLayout = {
            wrapperCol: {
                offset: 8,
                span: 16,
            },
        };
         let history = useHistory();
        const [form] = Form.useForm();
        //提交
        const onFinish = (values) => {
            console.log(values);
            let data ={
                password:values.password,
                id : id
            }
            console.log(data);
            Axios.post(Api.user.updateenroll,data).then((res)=>{
                if(res.data.code==200){
                    message.success(res.data.message+'请重新登录')
                    history.push('/login');
                }else {
                    message.error(res.data.message)
                }
            })
        };
        //清空表单
        const onReset = () => {
            form.resetFields();
        };
        //给原密码赋值
        const onFill = () => {
            form.setFieldsValue({
                oldpassword:  arr[0],
            });
        };


        return (
            <>
                <div className="mains">
            <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
                <Form.Item
                    name="oldpassword"
                    label="原密码"
                    rules={[
                        {
                            required: true,
                            message:'不能为空！'
                        },
                    ]}
                >
                    <Input type='password' palceholder="请输入旧密码或者点击下方自动填入"/>
                </Form.Item>
                <Form.Item
                    name="password"
                    label="新密码"
                    rules={[
                        {
                            required: true,
                            message:'不能为空！'
                        },
                    ]}
                >
                    <Input type='password' palceholder="请输入新密码"/>
                </Form.Item>
                <Form.Item label="确认密码" name="pw2" rules={[
                    ({getFieldValue})=>({
                        validator(rule,value){
                            if(!value || getFieldValue('password') === value){
                                return Promise.resolve()
                            }
                            return Promise.reject("两次密码输入不一致")
                        }
                    })
                ]}

                >
                    <Input palceholder="请确认密码" type='password'/>
                </Form.Item>
                <Form.Item {...tailLayout}>
                    <Button type="primary" htmlType="submit">
                        保存
                    </Button>
                    <Button htmlType="button" onClick={onReset}>
                        清空
                    </Button>
                    <Button type="link" htmlType="button" onClick={onFill}>
                        点击填入原密码
                    </Button>
                </Form.Item>
            </Form>
                </div>
        </>
        )
    })

export default inject( 'user' )(observer(Editpassword));//Editpassword是Hook页面的文件名

存储数据user文件代码

import {action,observable,computed} from "mobx";
import Axios from '../utils/axios'//封装的axios
import Api from '../api/index'//后端接口


class user{
    user
    token
    @observable isLogin = false;
    @computed get user(){
            return JSON.parse(sessionStorage.getItem('user') || '{}');//用user取数据
    }
    set user(values){
        sessionStorage.setItem('user',JSON.stringify(values));
    }
    @computed get token(){
        return sessionStorage.getItem('token') || '';
    }
    set token(values){
        sessionStorage.setItem('token',values);
    }
    @action
//发起请求的方法，在页面调用
    userLogin(userInput){
        //数据传给后台处理,如果后台处理不到，就用qs
       return new Promise((resolve, reject)=>{
           Axios.post(Api.user.userlogin,userInput).then((res)=>{
              if(res.data.code === 200){
                  //存储相应数据，存在mobx中
                  this.user = res.data.data;
                  this.token = res.data.token;
                  console.log(res.data.data)

                  resolve(res.data);
              }else {
                  reject(res.data);
              }
           })
       })
    }
}

export default new user()