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
相关推荐
喜欢便码18 分钟前
JS小练习0.1——弹出姓名
java·前端·javascript
chase。23 分钟前
【学习笔记】MeshCat: 基于three.js的远程可控3D可视化工具
javascript·笔记·学习
千野竹之卫1 小时前
3D珠宝渲染用什么软件比较好?渲染100邀请码1a12
开发语言·前端·javascript·3d·3dsmax
sunbyte1 小时前
初识 Three.js:开启你的 Web 3D 世界 ✨
前端·javascript·3d
孙_华鹏3 小时前
手撸一个可以语音操作高德地图的AI智能体
前端·javascript·coze
尖枫5084 小时前
学习笔记:金融经济学 第1讲
笔记·学习·金融
@PHARAOH4 小时前
HOW - 缓存 React 自定义 hook 的所有返回值(包括函数)
前端·react.js·缓存
拉不动的猪4 小时前
设计模式之--------工厂模式
前端·javascript·架构
Acxymy4 小时前
MySQL学习笔记十九
笔记·学习
啊哈哈哈哈哈啊哈哈4 小时前
R3打卡——pytorch实现心脏病预测
pytorch·深度学习·学习