React 学习——zustand异步操作

跟写普通方法一样,只不过再最后赋值的时候用set就行了。

javascript 复制代码
import { useEffect } from 'react'
import { create } from 'zustand'

// 创建store
const useStore = create(set=>{
  return {
    channelList: [],
    fetchChannelList: async()=>{
      const res = await fetch('http://geek.itheima.net/v1_0/channels')
      const jsonData = await res.json()
      set(state => ({ channelList: jsonData.data.channels }))
    }
  }
}) 
const App = () => {
  const { channelList,fetchChannelList } = useStore();
  useEffect(()=>{
    fetchChannelList()
  },[])
  return (
    <div className="home">
      <ul>
        {channelList.map(item=>(<li key={item.id}>{item.name}</li>))}
      </ul>
    </div>
  )
}
export default App
相关推荐
sinat_3842410922 分钟前
在有网络连接的机器上打包 electron 及其依赖项,在没有网络连接的机器上安装这些离线包
javascript·arcgis·electron
hopetomorrow35 分钟前
学习路之压力测试--jmeter安装教程
学习·jmeter·压力测试
hopetomorrow36 分钟前
学习路之PHP--使用GROUP BY 发生错误 SELECT list is not in GROUP BY clause .......... 解决
开发语言·学习·php
小牛itbull1 小时前
ReactPress vs VuePress vs WordPress
开发语言·javascript·reactpress
请叫我欧皇i1 小时前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_1 小时前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
/**书香门第*/1 小时前
Cocos creator 3.8 支持的动画 7
学习·游戏·游戏引擎·游戏程序·cocos2d
GIS瞧葩菜1 小时前
局部修改3dtiles子模型的位置。
开发语言·javascript·ecmascript
美式小田1 小时前
单片机学习笔记 9. 8×8LED点阵屏
笔记·单片机·嵌入式硬件·学习
zhang-zan2 小时前
nodejs操作selenium-webdriver
前端·javascript·selenium