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
相关推荐
2601_949593659 分钟前
基础入门 React Native 鸿蒙跨平台开发:Animated 动画按钮组件 鸿蒙实战
react native·react.js·harmonyos
知识分享小能手12 分钟前
Oracle 19c入门学习教程,从入门到精通,Oracle 的闪回技术 — 语法知识点与使用方法详解(19)
数据库·学习·oracle
不光头强13 分钟前
kafka学习要点
分布式·学习·kafka
凉、介13 分钟前
ACRN Hypervisor 简介
笔记·学习·虚拟化
方也_arkling15 分钟前
elementPlus按需导入配置
前端·javascript·vue.js
飞鹰5118 分钟前
深度学习算子CUDA优化实战:从GEMM到Transformer—Week4学习总结
c++·人工智能·深度学习·学习·transformer
顾西爵霞24 分钟前
个人学习主页搭建指南:从毛坯房到精装户型
学习·html
爱吃大芒果26 分钟前
Flutter for OpenHarmony 实战: mango_shop 资源文件管理与鸿蒙适配
javascript·flutter·harmonyos
hhhjhl29 分钟前
flutter_for_openharmony逆向思维训练app实战+学习日历实现
学习·flutter
近津薪荼34 分钟前
优选算法——双指针8(单调性)
数据结构·c++·学习·算法