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
相关推荐
小妖66619 分钟前
怎么用 tauri 创建一个桌面应用程序(Electron)
前端·javascript·electron
EndingCoder25 分钟前
单元测试:Jest 与 Electron 的结合
javascript·electron·单元测试·前端框架
ShineWinsu1 小时前
对于单链表相关经典算法题:206. 反转链表及876. 链表的中间结点的解析
java·c语言·数据结构·学习·算法·链表·力扣
FPGAI1 小时前
Qt的入门
笔记·qt·学习
脑洞代码1 小时前
20250905的学习笔记
笔记·学习
浊浪载清辉3 小时前
《Html泛型魔法学院:用霍格沃茨风格网页教授集合框架》
前端·javascript·学习·html
一只一只妖6 小时前
突发奇想,还未实践,在Vben5的Antd模式下,将表单从「JS 配置化」改写成「模板可视化」形式(豆包版)
前端·javascript·vue.js
悟能不能悟8 小时前
js闭包问题
开发语言·前端·javascript
秋秋_瑶瑶8 小时前
vue-amap组件呈现的效果图如何截图
前端·javascript·vue-amap
yuxb739 小时前
Docker学习笔记(二):镜像与容器管理
笔记·学习·docker