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;
};
}, []);4. react报错：findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of DomWrapper which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs
原因：由于使用了StrictMode组件，开启了严格模式校验，而findDOMNode方法已经被弃用或者未来版本会被React放弃，因此在严格模式下会报错，警示项目中或Ant框架还在使用这个可能被弃用的方法
解决方案： 1、项目内如果有使用findDomNode方法获取元素的逻辑，可以替换成使用ref
2、还可以去掉StrictMode组件，一般在index.js文件内（不太建议，严格模式仅生效于开发环境，可以帮助检测项目）
https://reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage5. react报错：[antd: Form.Item] `name` is only used for validate React element. If you are using Form.Item as layout display, please remove `name` instead.
原因：Form.Item组件下没有可Input或Select组件之类的组件，如果不需要输入类的组件，可以去掉属性name
# 这种设置name属性的会校验内部的子组件
<Form.Item name="name">
<Input />
</Form.Item>
# 不需要校验的或不需要输入组件的,需要去掉name属性
<Form.Item>
<div>text</div>
</Form.Item>6. react告警：React Hook useEffect has missing dependencies: 'XXX'. Either include them or remove the dependency array react-hooks/exhaustive-deps
原因： 官方给的意思是，useEffect内部使用了外部变量，但是却未监听这些变量的变化，会导致某些外部变量更新却没有回调useEffect的回调函数的bug出现；但是业务中还是存在一种情况，只需要在首次渲染仅调用一次，但又使用了外部变量的情况
解决方案：
1、 官方的意见 Docs
// 官方意见， useEffect内部使用的变量和方法都定义在函数内部
const [loading, setLoading] = useState(false);
useEffect(()=>{
const fetch = async ()=>{
setLoading(true);
....
setLoading(false);
}
fetch().then(r=>r); // 调用的方法在内部
}, []);
// 例子 2
const {name} = props;
useEffect(()=>{
const doString = ()=>{
return name;
}
doString();
}, [name]); // 由于内部使用了外部的name变量， 官方推荐需要监听name, 否则易出现外部name变量，但是却不会再调用回调方法
// ps: 这里传递的需要监听的方法，不能是函数类型， 如果传递函数类型会报错
2、 特殊情况，仅仅需要只调用一次回调函数，但是却需要使用外部变量或函数等，但又不希望看到eslint的警告时
const {name, title, visible} = props;
const fetch = (name, title)=>{
console.log(name, title);
}
// 可以使用官方建议的另一种方式 useRef 来保存不变的量
const initValue = useRef({});
useEffet(()=>{ // 当前函数每次更新都会调用，需要更新最新的数据，否则在下面使用的时候获取不到当时最新的数据
initValue.current = {
name, title, // 需要使用的数据， 内部不能使用函数，否则会报错
};
});
useEffet(()=>{
const {name, title, fetch} = initValue.current; // 重新获取需要的数据
fetch(name, title);
}, [initValue]); // 监听initValue时，不会因为内部数据变化而重复触发回调
// ps ： 经测试， 这里也可以不监听initValue， 也不会有eslint告警
7. react报错：validateDOMNesting(...): <form> cannot appear as a descendant of <form>.
原因： Form组件内部不存在可校验的Form.Item子组件(必须带有name属性的)
PS : 如果不存在子组件，并且使用了Button的htmlType=submit属性或者手动submit调用，表单会变成原生的表单（效果是点击直接刷新了页面）
解决方案： 如果使用Form组件时，内部不存在校验项， 不建议使用Form表单或者 不要调用表单的submit
8. react报错：antd DatePicker 报错 date.clone is not a function
原因： Antd里的 DatePicker组件的value值都是moment格式， 无论是填充或传给后端，都需要对日期的值使用moment处理
moment的文档地址： 首页 | Moment.js 中文文档
9. react告警：The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles.
原因： 页面内使用了不安全的a标签跳转链接
解决方案： 1 、使用Link组件替换；
2、或者检查a标签的必要属性：
a> href不能为空、#、javascript:xxx等代码，必须属于有效链接；
b> rel不能为空，必须指定 noopener ，避免被非法攻击
10. react+antd解决报错：Module not found: Can't resolve 'antd/es/affix'
原因： 1、 可能是版本不一致； 2、 babel的配置有错误 ； 3、antd未安装成功
解决方案： 1、重新安装版本； 2、 如果是babel配置错误，检查.babelrc文件或者package.json内babel属性
11. validateDOMNesting(...): ＜form＞ cannot appear as a descendant of ＜form＞.
原因： Form组件出现了嵌套导致的
解决方案： Form组件不能嵌套另一个Form组件, 移除内部的Form组件
12. Module Error (from ./node_modules/sass-loader/dist/cjs.js): Cannot find module 'sass' Require stack:
原因： 未安装node-sass模块
解决方案： yarn add node-sass 或 npm install node-sass
13. The above error occurred in the <Text> component:
原因： HTML结构有问题导致的，框架无法渲染，react16以后，如果出现结构错误，会卸载整个页面
解决方案： 检查视图结构
特殊参考：原因就是文本与组件文本相连时，容易导致xml结构问题
//例子
...
const content = "";
return <div>
<div>文字内容{content}</div>
</div>
// 以上结构看起来并没有什么问题，但是如果content是可变的量
const [content, setContent] = useState(null);
return <div>
<div>文字内容{content}</div>
</div>
// 如果是这种情况下，首次渲染并不会出现问题，二次渲染值不为空也不会有问题
// 如果二次渲染时content值再次变化为空值时，就会导致页面结构出错
// react框架会出现无法删除原来的textNode元素，导致整个页面结构被卸载纠正参考：
// 上述代码建议修改：
const [content, setContent] = useState(null);
...
return <div>
<div>文字文本<div>{content}</div></div>
</div>
// 如果出现文字与文本组件相连的建议给文本组件外套一层标签，可以让框架能找到所在根节点14. Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
原因同上13
当前错误多数出现在页面的结构有错误的情况下，框架在渲染组件时，会对真实DOM进行增删操作，如果页面结构有问题，容易导致DOM操作失败
页面结构有错误的检验方式： 整个页面被卸载， 页面一片空白，没有渲染出任何真实元素
后续继续补充...
129
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
