。

因为我们这个项目用的是React做前端的#xff0c;而我对于前端知识没有了解#xff0c;所以理解很多代码…在最新写需求的时候我遇到了一个需求这个需求改后端改的不算多而且也比较简单但是在改前端的时候很复杂。

因为我们这个项目用的是React做前端的而我对于前端知识没有了解所以理解很多代码都很困难更别说写了。

在我们这个项目中不仅仅用到了React这么简单还用到了Taro

TypeScriptTaro

语法。

但是我觉得一个个去学不成办法因为这样的话学习周期太长了而这个需求越快搞定越好。

之前睿哥在教我的时候和我说了这样一句话“你说你这里不懂那你为什么不把这里搞懂呢问AI啊”所以这次我也是试着用一种新的方法来学习前端的知识我选了一个index.tsx文件遇到不懂的代码就问AI一条一条的去理解这样说不定是掌握前端这么多知识的一种方法。

首先创建一个state对象state对象包含了多个字段每个字段都有具体的值。

然后指定state对象的类型为PropsTypePropsType是一个预先定义的TypeScript类型描述了state对象的结构和字段类型。

接下来我们研究一下PropsType

允许对象具有任意数量的其他属性。

这些属性的键key必须是字符串类型。

这些属性的值any可以是任意类型。

state:

组件在挂载时进行初始化和事件监听的过程。

通过监听路由事件并处理参数它能够动态地更新组件状态和界面显示。

这种模式需要根据路由参数动态更新组件内容。

详细说明

(params.reporterId)中params.reporterId返回的应该是true或者false而不是一个具体的数。

2、()

ES6引入的一种更简洁的函数定义方式。

关于箭头函数最主要的应该就是箭头函数不会创建自己的

this

上下文的情况非常有用。

比如这个代码这个getList()方法就是下文的用了this就可以在箭头函数使用了换句话说getList()方法不是在箭头函数创建的是从上下文拿的。

接下来看第三段代码

noMore说明已经没有更多数据可以加载了方法会立即返回不会执行后续的代码。

更新状态

的第二个参数是一个回调函数在状态更新完成后执行。

这个回调函数调用了

this.getList(true)

这段代码定义了一个handleLoading的函数方便接下来被调用。

其中这里的type是这个意思

也就是说在后面调用的时候你需要传一个参数true或者false给handleLoading然后才能够执行handleLoading()方法。

接下来看第六段代码

{this.handleLoading(true);const

{searchType,deviceCode,deviceId,reporterId,realExectorId,}

this.state;let

{...params,...this.state.page,};}getFaultCenterList(params).***n((result)

{if

},});}}this.handleLoading(false);}).catch(()

[],loadMore:

noMore,});this.handleLoading(false);});};

可以看到getList方法也有一个type不过type之后有一个问号

意思应该就是如果你接下来需要使用getList方法的话你可以传值也可以不传值。

getList

这块代码的意思是看看有没有其他条件参数有的话顺便把这些参数添加到params中没有就跳过这段代码。

这段代码相对复杂一点

getFaultCenterList(params)//发起请求