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
相关推荐
kite01213 小时前
浏览器工作原理06 [#]渲染流程(下):HTML、CSS和JavaScript是如何变成页面的
javascript·css·html
крон3 小时前
【Auto.js例程】华为备忘录导出到其他手机
开发语言·javascript·智能手机
coding随想5 小时前
JavaScript ES6 解构:优雅提取数据的艺术
前端·javascript·es6
年老体衰按不动键盘5 小时前
快速部署和启动Vue3项目
java·javascript·vue
恰薯条的屑海鸥5 小时前
零基础在实践中学习网络安全-皮卡丘靶场(第十六期-SSRF模块)
数据库·学习·安全·web安全·渗透测试·网络安全学习
灵感__idea5 小时前
JavaScript高级程序设计(第5版):无处不在的集合
前端·javascript·程序员
喜欢吃燃面6 小时前
C++刷题:日期模拟(1)
c++·学习·算法
星辰引路-Lefan6 小时前
深入理解React Hooks的原理与实践
前端·javascript·react.js
江城开朗的豌豆6 小时前
JavaScript篇:函数间的悄悄话:callee和caller的那些事儿
javascript·面试
江城开朗的豌豆6 小时前
JavaScript篇:回调地狱退散!6年老前端教你写出优雅异步代码
前端·javascript·面试