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
相关推荐
冰暮流星30 分钟前
javascript事件案例-全选框案例
服务器·前端·javascript
stm32 菜鸟1 小时前
nucleo-f411re学习记录-9,双轴XY摇杆传感器
学习
南子北游1 小时前
Python学习(基础语法1)
开发语言·python·学习
Dillon Dong1 小时前
【系列主题】Next.js 16 + Turbopack 的暗礁:深入剖析 Tailwind v4 的 CSS 模块解析陷阱
javascript·css·容器·turbopack
糯米团子7491 小时前
Web Worker
开发语言·前端·javascript
freewlt2 小时前
React Server Components 深度解析
前端·react.js·前端框架
我命由我123452 小时前
JavaScript 开发 - 获取函数名称、获取函数参数数量、获取函数参数名称
开发语言·前端·javascript·css·html·html5·js
Atri厨2 小时前
X86存储器的段描述符学习随笔
学习
星幻元宇VR3 小时前
VR航空航天科普设备助力航天知识普及
人工智能·科技·学习·安全·vr·虚拟现实
d111111111d3 小时前
STM32-UART封装问题解析
笔记·stm32·单片机·嵌入式硬件·学习·算法