上次在写关于index.tsx的解析的文章的时候，写着写着我突然发现文章太长了，以至于我把代码的很多细节都给忽略掉，只把index.tsx文件的大致结构给写了出来。所以接下来的几篇文章，我将会把index.tsx分成很多个部分，我争取对于每个部分，都尽量的讲的通透易懂，而且生动形象。
type PropsType = {
loadMore: 'more' | 'noMore' | 'loading' | undefined; //loadMore 的值可以控制一些组件的状态
[key: string]: any;
};
/*
'more'：通常在分页加载数据时，表示当前页面的数据已经加载完成，可以继续加载下一页的数据
'noMore'：通常在分页加载数据时，表示所有数据已经加载完毕，没有更多数据可以加载了
'loading'：表示正在加载数据。通常在发起数据请求时使用，表示当前正在加载数据，可能会显示一个加载动画或进度条
undefined：表示 loadMore 属性未定义或未初始化。这种情况下，loadMore 属性没有特定的状态，可能用于初始化或重置状态
*/
上面的代码我们称之为"类型定义"。其实这是typescript的语法，我上网百度了一下，其实这个代码可以省略，但是如果你有这个代码，就会更加严谨规范。
state: PropsType = {
actionSheetIsOpen: false,
searchType: '0,5,6,9', //故障中心首页存储的故障单种类
execStatus: null,
faultStatusMap: new Map(),
faultStatusList: [],
loadMore: 'more', //控制加载更多的状态
page: { //分页信息
pageSize: 10,
current: 1,
},
// tabList: [{ title: '公共故障' }, { title: '我的上报' }],
listData: [], //现在先定义为空数组，待会儿从后端拿到故障单后，每张故障单都会放到这里
userInfo: getStorageSync(TOKEN_KEY),
deviceCode: '',
deviceId: '',
reporterId: '',
realExectorId: '',
loading: false, //控制加载状态
selectedButton: null, // 用于跟踪选中的按钮
};
这个代码是React中的组件状态的初始化，为组件提供默认值，确保组件在第一次渲染时有一个合理的初始状态。
因为每个组件都有自己的状态，你不可能一个组件啥状态也没有吧，那组件需要有状态的话，状态的值是多少呢？组件第一次渲染的时候，必须要有状态值，不然它渲染不出来，所以这个代码就是初始化状态的。
componentDidMount() {
this.getBaseDefineOption(); //获取初始数据
/*
eventCenter.on 方法用于监听路由的 onShow 事件。
当页面显示时，回调函数会被调用，回调函数中会通过 this.$instance?.router?.params 获取当前路由的参数，并根据参数执行相应的逻辑。
*/
eventCenter.on(this.$instance.router!.onShow, () => {
const params: any = this.$instance?.router?.params;
console.log(JSON.stringify(params)+"params") //params没有，证明监听不到路由参数
if (params) {
if (params.reporterId) {
Taro.setNavigationBarTitle({
title: '我的故障',
});
} else if (params.realExectorId) {
Taro.setNavigationBarTitle({
title: '我的维修',
});
}
this.setState(
{
deviceId: params.deviceId,
deviceCode: params.deviceCode,
reporterId: params.reporterId,
realExectorId: params.realExectorId,
},
() => {
this.getList();
}
);
} else {
this.getList();
}
});
}
这个是生命周期函数。
既然说到了生命周期函数，那我们来说说首次加载组件时的顺序：先执行初始化state，接着执行render()，最后执行componentDidMount()方法。我一开始不是很懂什么是首次加载组件，然后我问了一下AI，大致意思就是，比如我有一个故障中心，首次加载组件指的就是用户第一次访问故障中心页面时，组件从创建到呈现的整个过程。
所以其实故障中心可以被理解成一个大组件，或者叫容器组件。大组件通常会使用componentDidMount()方法进行数据获取，获取的数据会存储在大组件的state中，并通过将状态和回调函数作为属性传递给子组件。
对于大组件中的子组件，比如说按钮这种就是子组件。如果你点击一个按钮，执行的顺序应该是这样的：首先会执行事件处理程序，接着执行setState更新组件的状态，最后执行render重新渲染。
可以看到，你点击一个按钮和你进入故障中心其实背后的工作是不一样的，你点击按钮时不会触发初始化state和componentDidMount的，只会触发状态更新和重新渲染。
onReachBottom() {
if (this.state.loadMore == 'noMore') {
return;
}
this.setState(
{
loadMore: 'loading',
page: {
...this.state.page,
current: this.state.page.current + 1,
},
},
() => {
const {
execStatus,
} = this.state;
if (execStatus !== undefined && execStatus !== null) {
this.getList({ execStatus }, true);
} else {
this.getList({}, false); // 不传递 execStatus 参数
}
}
);
}
这个代码是典型的处理滚动加载的代码，当用户滚动到底部时触发。如果 loadMore 状态为 noMore，则直接返回不执行任何操作。否则，它会将 loadMore 状态设置为 loading，并增加 page.current 的值，然后在状态更新完成后，根据 execStatus 的值调用 getList 方法来继续加载故障单列表（如果execStatus 的值是1，就会继续加载未完成的故障单，如果execStatus 的值是2，就会继续加载已完成的故障单，如果execStatus 的值是null，就会继续加载是[0,5,6,9]的故障单）。
getList = (/*type,loadMore*/ /*type = {}, loadMore = false*/ type: { execStatus?: number | null } = {}, loadMore: boolean = false) => {
this.handleLoading(true);
const {
searchType,
deviceCode,
deviceId,
reporterId,
realExectorId,
execStatus,
} = this.state;
// console.log(searchType+"测试");0569
// console.log(deviceCode+"测试");null
// console.log(deviceId+"测试");null
// console.log(reporterId+"测试");null
console.log(execStatus+"测试")
let params: any = {
...this.state.page,
...type,
};
//console.log(JSON.stringify(params) + " 测试数据1"); {"pageSize":10,"current":1,"execStatus":2} {"pageSize":10,"current":1}
if (type && type.execStatus) {
params.execStatus = type.execStatus;
} else {
params.statusSet = searchType;
}
//console.log(JSON.stringify(params) + " 测试数据2"); {"pageSize":10,"current":1,"execStatus":2} {"pageSize":10,"current":1,"statusSet":"0,5,6,9"}
if (deviceId) {
params.deviceId = deviceId;
}
if (deviceCode) {
params.deviceCode = deviceCode;
}
if (reporterId) {
params.reporterId = reporterId;
}
if (realExectorId) {
params.realExectorId = realExectorId;
}
//console.log(JSON.stringify(params) + " 测试数据3"); {"pageSize":10,"current":1,"execStatus":2} {"pageSize":10,"current":1,"statusSet":"0,5,6,9"}
getFaultCenterList(params)
.then((result) => {
if (result?.code === SUCCESS) {
if (loadMore) {
this.setState({
listData: [...this.state.listData, ...result.data.list],
loadMore: result.data.list.length > 0 ? 'more' : 'noMore',
});
}
else {
this.setState({
listData: result.data.list,
loadMore: result.data.total <= 10 ? 'noMore' : 'more',
actionSheetIsOpen: false,
page: { ...this.state.page, current: 1 },
});
}
}
this.handleLoading(false);
})
.catch(() => {
this.setState({
listData: [],
loadMore: 'noMore',
});
this.handleLoading(false);
});
};
这个代码是获取故障单列表的代码，也是最重要的代码。
"已完成"和"未完成"这两个按钮的事件处理函数中，更新完组件状态后，就调用了这个方法获取故障单。接下来，我以"已完成"按钮为例，详细的介绍一下这个代码。
const {
searchType,
deviceCode,
deviceId,
reporterId,
realExectorId,
execStatus,
} = this.state;
这里是解构赋值。比如说，是"已完成"按钮调用了这个getList()方法的，那么这里的解构赋值拿的就是"已完成"按钮的状态的值，比如这里就会拿this.state.execStatus=2（已完成按钮自己的状态）赋值给getList()方法的execStatus属性。
let params: any = {
...this.state.page,
...type,
};
这个是JavaScript的语法，代码意思是：创建了一个名为 params 的对象，它通过对象展开运算符 (...) 将 this.state.page 和 type 对象的所有属性合并到 params 中。
if (type && type.execStatus) {
params.execStatus = type.execStatus;
} else {
params.statusSet = searchType;
}
这段代码检查 type 对象是否存在且 type.execStatus 是否有值。如果 type.execStatus 存在，则将其赋值给 params.execStatus；否则，将 searchType 的值赋给 params.statusSet。
getFaultCenterList(params)
.then((result) => {
if (result?.code === SUCCESS) {
if (loadMore) {
this.setState({
listData: [...this.state.listData, ...result.data.list],
loadMore: result.data.list.length > 0 ? 'more' : 'noMore',
});
}
else {
this.setState({
listData: result.data.list,
loadMore: result.data.total <= 10 ? 'noMore' : 'more',
actionSheetIsOpen: false,
page: { ...this.state.page, current: 1 },
});
}
}
this.handleLoading(false);
})
.catch(() => {
this.setState({
listData: [],
loadMore: 'noMore',
});
this.handleLoading(false);
});
};
前面不是说了将很多属性赋值到params参数吗？这个params参数是请求参数，通过请求参数从后端接口中得到数据之后，会把后端返回的数据装到"result"里。如果 loadMore 为 true，也就是需要加载更多数据，则将新获取的数据追加到现有的 listData 中；如果 loadMore 为 false，也就是不需要加载更多数据，那直接将 listData 重置为新获取的数据。
其实你看一下这段逻辑就知道了，从后端拿到list[]的数据之后，要把list[]的数据放到listData中，listData其实就是状态。其他的状态就看着来更新，返回true或者false，更新的状态也不一样。
cancel2 = async () => {
this.setState(
{
execStatus: 2,
page: {
...this.state.page,
current: 1,
}
},
() => {
this.getList({ execStatus: 2 }, false);
});
};
这个代码就是在点击"已完成"按钮时更新状态，并重新获取故障单的列表数据。
cancel1 = async () => {
this.setState(
{
execStatus: 1,
page: {
...this.state.page,
current: 1,
}
},
() => {
this.getList({ execStatus: 1 }, false);
});
};
这个代码就是在点击"未完成"按钮时更新状态，并重新获取故障单的列表数据。
render() {
const { faultStatusMap, faultStatusList, userInfo ,selectedButton}: any = this.state;
const TaskStatuText = function(props) {
const {
status,
realExectorId,
realExectorName,
pendingAcceptorId,
pendingAcceptor,
} = props.info;
};
const FaultCenterItem = () => {
return (
<View>
{this.state.listData.map((item) => (
<View
className='container-item'
key={item.id}
onClick={() => this.toTaskList(item)}
>
<View className='title'>
{item.deviceName} ( {item.devicePosition} )
</View>
<View className='des'>
<View>
上报人/<Text className='name'>{item.reporterName}</Text>
</View>
<View>
<TaskStatuText info={item} />
</View>
</View>
<View className='footer'>
<View className='time'>{item.reportTime}</View>
<View className='btn'>
<Text className='check'>查看详情</Text>
<View className='at-icon at-icon-chevron-right'></View>
</View>
</View>
</View>
))}
</View>
);
};
return (
<View className='two-buttons-container'>
<AtButton
className={`button ${selectedButton === 'cancel1' ? 'selected' : ''}`}
onClick={this.cancel1}
>
未完成
</AtButton>
<AtButton
className={`button ${selectedButton === 'cancel2' ? 'selected' : ''}`}
onClick={this.cancel2}
>
已完成
</AtButton>
</View>
<View className='container'>
<FaultCenterItem />
</View>
</View>
);
}
}
export default Index;
未完待续......