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
相关推荐
用户8168694747256 分钟前
React 事件系实现
前端·react.js
CoolerWu9 分钟前
Trae Solo 实战指南:从"会用"到"用好"的协作方法论
前端·javascript
鹏多多19 分钟前
轻量+响应式!React瀑布流插件react-masonry-css的详细教程和案例
前端·javascript·react.js
d111111111d19 分钟前
STM32-外设学习-读写备份寄存器(代码)--学习笔记
笔记·stm32·单片机·嵌入式硬件·学习
Chloeis Syntax19 分钟前
MySQL初阶学习日记(3)--- 增查改删(CRUD)
数据库·学习·mysql
丝斯201121 分钟前
AI学习笔记整理(24)—— AI核心技术(深度学习8)
人工智能·笔记·学习
一颗宁檬不酸24 分钟前
Vue.js 初学者基础知识点总结 第一弹
前端·javascript·vue.js
xiaoxue..25 分钟前
解析 LocalStorage与事件委托在前端数据持久化中的应用
前端·javascript·面试
j***894626 分钟前
MySQL数据的增删改查(一)
android·javascript·mysql
凉、介26 分钟前
Linux 下的 time_before/time_after 接口
linux·运维·服务器·学习