React + Ant Design 4 使用过程中问题搜集

码农@cj

已于 2022-11-04 13:05:07 修改

阅读量6.1k

点赞数 2

分类专栏：错题本 Web前端文章标签：前端 reactjs

于 2022-04-16 12:34:03 首次发布

本文链接：https://blog.csdn.net/u010336468/article/details/124184198

版权

1. Anchor 描点不生效

原因：

1. 滚动的window没有滚动事件

2. 待滚动的描点，未在页面中标记

解决方案：

1. getContainer=()=> document.body 给Anchor组件指定绑定的容器

// 默认指定的是window
...
<Anchor getContainer=()=> document.body>
...

2. 元素需要标记的id="描点不包含#" 才能生效

// href指定的dome,  元素内指定id=dome
<Anchor>
    <Anchor.Link title="title" href="#dome"/>
...
</Anchor>
...
<div id="dome">
...
</div>

2. Anchor 每次点击都会触发路由变化

解决方案：

const handleClick = (e)=>{
e.preventDefault();
}
...
<Anchor onClick={handleClick}>
...
</Anchor>

3. react报错：Can't perform a React state update on an unmounted component

原因：由于组件被销毁后，还在调用更新state的逻辑

解决方案： 1、 class类组件，可以重写componentWillUnmount

class Component extends React.Component{
....

componentWillUnmount(){
    this.setState = ()=>{}
}

...

2、 function组件的实现方法，这个有点要求

const [loading,setLoading] = useState(false);

useEffect(()=>{
    // 这个只能控制当前回调函数内的作用域
    let ignore = false;
    
    const request = async ()=>{
        // ...    
        if(ignore){ // 如果已卸载不调用任何useState
            return;
        }
        setLoading(true);
    }
    
    return ()=>{
        ignore = true;
    };
}, []);