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
相关推荐
青衫码上行2 分钟前
【Java Web学习 | 第七篇】JavaScript(1) 基础知识1
java·开发语言·前端·javascript·学习
咖啡の猫2 分钟前
Vue编程式路由导航
前端·javascript·vue.js
fs哆哆1 小时前
PDFsharp库的加密功能-学习笔记
笔记·学习
qzhqbb5 小时前
神经网络—— 学习与感知器(细节补充)
神经网络·学习
风暴之零6 小时前
卡尔曼滤波学习
人工智能·学习·机器学习
2401_860319527 小时前
【无标题】
开发语言·学习·rust
Nebula_g8 小时前
C语言应用实例:解方程(二分查找)
c语言·开发语言·学习·算法·二分查找·基础
三品吉他手会点灯9 小时前
stm32f103学习笔记-16-RCC(第2节)-讲解系统时钟配置函数SetSysClockTo72()
笔记·stm32·单片机·嵌入式硬件·学习
视图猿人9 小时前
RxJS基本使用及在next.js中使用的例子
开发语言·javascript
wdfk_prog10 小时前
[Linux]学习笔记系列 -- [kernel]cpu
linux·笔记·学习