react hooks + TS + antd项目总结

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
  

--------未完待续---------