最终效果
1.ES6知识点：解构赋值+重命名
let obj ={
a,{
b:2}}
const {
a} = obj // 传统解构赋值
const {
a:{
b}} = obj // 连续解构赋值
const {
a：{
b:value}} = obj // 连续解构赋值+重命名
2.消息订阅与发布机制
- 先订阅，再发布
- 适用于任何组件内的通信
- 在 componentWillUnmount() 中取消订阅
// 订阅
this.token = Pubsub.subscribe('updateListState', (_, data) => {
this.setState(data)
})
// 更新信息
Pubsub.publish('updateListState', {
isLoading: false, users: data.items })
// 取消订阅
Pubsub.unsubscribe(this.token)
3.fetch发送请求(关注分离设计思想)
要处理请求失败的情况
try {
const reponse = await fetch(`/api1/search/users2?q=${
keyword}`)
const data = await reponse.json()
Pubsub.publish('updateListState', {
isLoading: false, users: data.items })
} catch (error) {
console.log('请求出错', error)
Pubsub.publish('updateListState', {
isLoading: false, err: '请求出错:' + error.message })
}