1.无论如何获取不到ref可能的原因
this对象指向非当前对象
2.报错
Can’t perform a React state update on a component that hasn’t mounted yet. This indicates that you have a side-effect in your render function that asynchronously later calls tries to update the component. Move this work to useEffect instead.
当前数据还未请求完毕组件就被卸载,于是数据请求完再去调用之前的组件时就会报此错误
可以使用Promise.race中断请求,下面用一个onSelect事件举例(当频繁选择某个列表中的选项时,就会导致上一个选项的请求还没结束就开始请求下一个选项的请求)
Promise.race原理:Promise.race() 方法常用于实现各种异步编程模式,例如超时、竞态条件和负载均衡等。如果你想从两个不同的 API 中获取数据并使用先到达的响应结果,就可以使用 Promise.race() 创建两个 Promise 对象,分别对应每个 API 的调用,然后将它们传入 Promise.race() 中进行处理。返回的 Promise 对象将根据最先到达的响应来决定自己的状态。
(下面的例子原理就是将请求的接口和中断对象数组都传入race函数,当每次点击列表开始请求的时候,如果发现中断对象数组不为空,则说明之前有请求发生,所以执行中断,再继续请求当前数据)
const cancelRef = useRef([])
const onSelect = async (value,option) => {
//中断操作执行
if(cancelRef.current && cancelRef.current[0]){
cancelRef.current.map((item) => {
item("中断请求")
})
}
cancelRef.current.length = 0;
try{
let detail = await Promise.race([props.componentService.getDetail(option)/*需要中断的请求*/,new Promise((resolve,reject)=>{
cancelRef.current.push(reject);
})])
}catch(e){
//异常捕获
}
}
3.报错
Unsafe legacy lifecycles will not be called for components using new component APIs.
getDerivedStateFromProps和componentWillMount不能同时使用,原因是使用新 API时,React 不会调用组件的 “unsafe” 生命周期,因此暂时先注释掉新 API。
4.在theia框架里用rc-tree组件 自定义title为div时修改state但是相关数据不更新
title不能直接用div,应通过react.component组件,在内部进行状态管理