前置条件
脚手架： vite v4.4.0
前端框架： React v18.2.0
ui组件库：antd v5.7.0
路由： react-router-dom v6.14.1
知识记录
1.class创建的类组件和function创建函数组件的区别
class创建的组件，有自己的私有数据（this.state）和生命周期函数，称为无状态组件
class Nas extends Component{}
function创建的组件，只有props，没有自己的私有数据和生命周期函数
2.全局封装axios
3.跨组件传值
父组件可以将值传递给子组件，子组件是个函数组件，但子组件传递给孙子组件（类组件）的时候，不会执行componentDidMount，会在componentWillReceiveProps中接收Props
使用Context实现跨组件传值
参考链接：blog.csdn.net/huanhuan03/…
需要在父组件中将Context导出，然后在子组件中导入，目前使用的是非hooks的写法
在父组件中定义
export const Context = React.createContext({ activeKey: null });
// 定义需要共享的数据
<Context.Provider value={{activeKey:'lx'}}>
<son />
</Context.Provider>
// 子组件内容中获取数据可以采用hooks写法和非hooks写法两种来获取
//非hooks写法如下，先引入定义的的Context
import Context from './parent'
<Context.Consumer>
{(name ) =>
<p>获取传递下来的值:{name.activeKey}</p>
}
</Context.Consumer>
// react16.8版本之后增加了hooks，可以使用hooks中的useContext来获取消费者
import {useContext} from 'react'
const { activeKey } = useContext(Context);// 直接这样定义就可以拿到consumer的值，然后直接当成变量使用即可，省去了之前要定义在Consumer中才能使用。
class App extends React.Component {
render() {
return <Toolbar theme="dark" />;
}
}
function Toolbar(props) {
// Toolbar 组件接受一个额外的“theme”属性，然后传递给 ThemedButton 组件。
// 如果应用中每一个单独的按钮都需要知道 theme 的值，这会是件很麻烦的事，
// 因为必须将这个值层层传递所有组件。
return (
<div>
<ThemedButton theme={props.theme} />
</div>
);
}
class ThemedButton extends React.Component {
render() {
return <Button theme={this.props.theme} />;
}
}
// 通过props传递：App -> Toolbar -> ThemedButton
// 如果嵌套很深，那么需要逐层传递props，即使中间不需要该props，显得很繁琐
挂载在 class 上的 contextType 属性会被重赋值为一个由 React.createContext() 创建的 Context 对象。这能让你使用 this.context 来消费最近 Context 上的那个值。你可以在任何生命周期中访问到它，包括 render 函数中
import MyContext from './MyContext';
class MyClass extends React.Component {
componentDidMount() {
let value = this.context;
/* 在组件挂载完成后，使用 MyContext 组件的值来执行一些有副作用的操作 */
}
componentDidUpdate() {
let value = this.context;
/* ... */
}
componentWillUnmount() {
let value = this.context;
/* ... */
}
render() {
let value = this.context;
/* 基于 MyContext 组件的值进行渲染 */
}
// 或者如上边例子一样使用 static contextType = MyContext;
}
MyClass.contextType = MyContext;
4.类组件中，处理数组map生成元素
import React from 'react'
class Two extends React.Component {
render() {
return (
<div className="site-input-group-wrapper">
{
this.state.array && this.state.array.map((item, index) => {
return (
<p key={index}>{item}</p>
)
})
}
</div>
)
}
};
export default Two
问题记录
1.使用Antd 的form表单
报如下错误信息：
未排查到具体问题，猜测是引入的某个包的配置和antd的冲突了
2.安装node-sass失败问题
解决方法：
3.给button绑定事件，提示this未定义
解决办法：
改为箭头函数，即可访问到this
toOrder = () => {
if (this.props.isLogin) {
this.setState({
orderUrl: '/api/page/sds-nfs-web/order/nas?'
})
} else {
window.location.href = `/api/page/op-order-static/login?returnUrl=${encodeURIComponent(window.location.href)}`;
}
}
相关知识点：blog.csdn.net/weixin_4122…
4.nvm-windows安装
（1）vite3需要 Node.js 版本 14.18+，16+。而本地node版本为14.15
为方便后续切换nodejs版本，安装nvm-windows(安装前一定要把本地node卸载干净)
参考链接：
npm create vite@latest sds-nfs-fasterorder-react --template react //创建项目
5. eslint错误 'XX' is missing in props validation
配置eslint 以及解决 ‘xxx‘ is missing in props validation和 组件变量 is assigned a value but never used
解决方法：
参考链接：
5. axios请求配置问题
(1)基础的axios的post方法
this.$axios({ //这种格式，是需要每个参数都弄成对象的
methods: 'POST',
url: '#',
data: {
key1: val1,
key2: val2
},
timeout: 1000,
baseURL:'xxxx'
...//其他相关配置
})
（2）基础的axios的get方法
this.$axios({
methods: 'get',
url: '#',
params: { //注意是params，get请求必须写上params，不能写data
key1: val1,
key2: val2
},
timeout: 1000,
baseURL:'xxxx'
...//其他相关配置
})
6. 父子组件传值，props接收到的值不稳定
原因是因为子组件的componentDidMount只执行了一次。prop更改时，子组件没有更新
7. 使用ReactDOM.render报错
解决方法：将文件的js后缀改为jsx后缀
8. useEffect报错
而我们项目中的写法是
错误2：
代码中写为
立即选配
还没点击就开始报错
解决办法：onClick后跟的函数改为箭头函数
参考链接：blog.csdn.net/fish_skyyyy…
9. 通过react-tools查看Component报错“The timeout occurred at InspectedElementContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:42052:3)”
问题定位：
代码第二行，原来写的是
const context = useContext(UserInfoContext) （怀疑是使用context这个变量导致的）
通过解构赋值改为如下的格式就没问题了。
const FasterSetting = (props) => {
const {authorityString, userInfo} = useContext(UserInfoContext)
console.log('context', authorityString, userInfo)
const [measureList, setMeasureList] = useState([]
}
注：菜鸟初次开发，记录比较繁琐，后续会继续整理，以便以后开发查找
