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
相关推荐
m4Rk_4 小时前
【论文阅读】Agent 记忆机制(75):TiMem——用时间记忆树实现长期记忆的层级巩固
论文阅读·人工智能·学习·开源·github
外收内放5 小时前
Python与AI应用(项目开发实战:AI智能伴侣第三版)
python·学习·ai编程
尾善爱看海5 小时前
《JavaScript 数组操作全攻略:12 类 API + 30 个实战场景 + 20 个避坑指南》
前端·javascript·面试
OpsEye5 小时前
为什么你的 Agent 莫名烧钱?聊聊循环调用的兜底方案
javascript·ai编程
pddqjd5 小时前
顺德区中考美术集训画室概念释义与核心服务要点梳理
学习
linux_cfan5 小时前
16 · `custom-media-element`:属性拦截与转发
前端·javascript·音视频
右耳朵猫AI6 小时前
Web前端周刊2026W38 | React 19.3 发布、StyleX 深潜、jsdom 30.1 提速
前端·javascript·react.js·typescript·node.js
落魄大学生之流水线上谋生计6 小时前
GreenLife Carbon · OpenHarmony 智慧低碳生态平台
javascript
传奇开心果编程6 小时前
【Jetpack Compose基础语法学与练】第7课 if条件渲染 + 列表基础(LazyColumn)
学习·ui·kotlin·android jetpack
Rabitebla6 小时前
【Linux系统编程】 指令(二):一条路径是怎么定位到文件的
linux·c++·笔记·学习·算法