react hooks + TS + antd项目总结
文章目录
useEffect中发请求注意事项
-
useEffect 的第二个参数,或根据传入的值有多种变化。
-
什么都不传
useEffect(() => {})
,组件每次render
之后useEffect
都会调用,相当于componentDidMount
和componentDidUpdate
-
传入一个空数组
useEffect(() => { },[])
只会调用一次,相当于
componentDidMount
和componentWillUnmount
-
传入一个数组,其中包括变量,只有这些变量发生变化时,
useEffect
才会执行
-
-
在useEffect中使用 async/await中异步获取数据时,会报错需要在其中在封装一个函数
useEffect(() => { async function request() { const res = await axios('/test') } request() },[])
useContext组件间传参
作用方便了父子组件或者祖孙等隔代传参,在隔了很多代中有奇效。
用法 : 父组件
import React, { useState, createContext } from 'react';
export let MyContext: any = createContext(false) //赋初值 防止意外报错
const [state,setState] = useState(false)
return (
<MyContext.Provider value={{ state, setState }}>
<Children />
</MyContext.Provider>
)
后代组件
import React, { useState, useContext } from 'react';
const { state, setState } = useContext(DrawerContext)
//这样就可以拿到state 和 setState
可以同很方便的通过子组件来修改父组件中state的状态
路由组件传参、取值
接受 params参数和 query参数 路由中写法
params 类型 :
<Route path="/test/:id" component={Test} />
props.history.push('/test/' + id)
取值:props.match.params
query类型:
props.history.push({
pathname:'/test',
query:{data:1}
})
取值: props.location.query
Axios 拦截器加token,统一处理错误
import axios from 'axios';
import storageUtils from '../utils/storageUtils'
import { message } from 'antd'
// Add a request interceptor 阻截器
axios.interceptors.request.use(function (config) {
// Do something before request is sent
const token = storageUtils.getToken();
if(token) {
config.headers.Authorization = token
}
return config;
});
//响应拦截器
axios.interceptors.response.use(function (response) {
return response.data;
}, function (error) {
console.log(error)
message.error("请求出错" + error.message);
return new Promise(() => { })
});
export default axios
项目中遇到的问题
-
react hook + TS TS 中的类型推断的问题,结合antd用很头疼,弄不出来的类型都用的any,
-
antd 4X中的问题 Upload组件 中的fileList 类型错误 — 版本bug 已修复
-
react中 受控组件和非受控组件—在使用antd中的表单需要动态获取后台接口的数据例如(修改功能),我们需要给表单赋初值,就不能使用defaultValue了,而应该使用value,并且配合着onChange一起使用,这就是受控组件
-
报错跨域问题:Error: A cross-origin error was thrown. React doesn’t have access to the actual error object in development. See https://fb.me/react-crossorigin-error for more information.
const user = JSON.parse(undefined); 就会报如上错误。
-
使用git命令报如下错误
fatal: unable to access 'https://github.com/B-A-R-team/ehotel-admin.git/': Failed to connect to github.com port 443: Timed out
在网上也找了很多修改这个错误的办法,有添加代理的,也有取消代理的,但是像我们平常没有设置过代理的显然这种办法是不管用的。但是为什么git命令突然就不管用了呢,这几天我就遇到了这个问题,然后发现居然是联通网的问题。 我们可以测试一下 在cmd中
ping github.com
如果响应超时则代表 当前网络连接不上github,当然这个并不是黑联通,可能只是我们这个地方的联通网,暂时不能访问Github(毕竟以前还是可以的) -
antd中日期选择器的使用,获取到的值得类型是moment类型的,因此需要moment类型的转化
-
可以通过引入useHistory的方式来 使用props 而不是靠父组件传过来。
import { useHistory } from 'react-router-dom'; const h = useHistory() h.replace('/room') // 这个h就相当于props
--------未完待续---------