react函数组件——use接收路由参数之HOOK函数获取——useSelector,useDispatch用法——antpc端表单的简单使用

Posted 2022-10-10 勇敢*牛牛

react函数组件——接收路由参数之HOOK

在使用组件库的时候，如果遇到事件函数执行之后内部的参数无法通过平常的赋值手段传到外面，那么我们就考虑使用在setState或者useState提供的方法来修改外部的值。

---

《注意多从实验的角度，探讨的角度去摸索，不会的先思考再上网查》

---

• useParams
  获取动态路由参数
• useLocation
  获取location对象，search，state，pathname。

import React from 'react';

import  useParams,useLocation  from 'react-router-dom';
const Admin = (props) => 
    let params = useParams();
    let location = useLocation();
    console.log("admin_params",params);
    console.log("admin_loaction",location);
    console.log(props);
    return (
        <div>
            admin
        </div>
    );


export default Admin;

---

useSelector,useDispatch用法

import  useSelector,useDispatch  from 'react-redux'

useSelector
*参数获取到state对象
useDispatch
*修改数据源 

获取

let test  = useSelector(state=>/* 就会返回一个state源 */
    console.log(state);
    return state.user
)
console.log(test);

修改

导入
import doLoginAction from '@/store/actions/userAction'
修改
const dispatch = useDispatch()
let end = dispatch(doLoginAction());

这里与类组件不同的是：dispatch传入的参数是不一样的
当时通过connect（）第二个参数是个对象，然后通过中间件来完成了dispstch掺入一个action对象来的修改了start。
现在直接通过useDispatch这个玩意来完成了dispatch的通知。