React中easy-peasy获取的playlists无法更新到本地state问题求助

问题排查与修复方案 #

你的代码存在3个核心问题，按优先级排序如下：

• useEffect依赖配置错误：当前依赖项为playlistsLocal，而effect内部又更新该状态，会触发无限循环。同时reloadPlaylists是异步请求操作，调用后不会立刻更新全局store里的playlists值，你在调用后立即赋值拿到的是请求前的旧值。
• 初始状态异常：playlistsLocal初始值设为null，渲染时直接取playlistsLocal[0]会抛出空指针错误。
• 组件使用不规范：Ant Design的Select组件子项需使用Select.Option，原生option会出现属性不兼容问题。

修复后代码 #

import React, { useState, useEffect } from 'react'
import { useStoreState, useStoreActions } from 'easy-peasy'
import { Select } from 'antd'

function PlaylistSelector() {
    const playlists = useStoreState(state => state.playlists.items)
    const reloadPlaylists = useStoreActions(actions => actions.playlists.reload)
    // 初始值改为空数组避免空指针
    const [playlistsLocal, setPlaylistsLocal] = useState([])

    // 组件挂载时拉取最新播放列表，仅执行一次
    useEffect(() => {
        reloadPlaylists()
    }, [])

    // 监听全局playlists变化，同步到本地状态
    useEffect(() => {
        setPlaylistsLocal(playlists)
    }, [playlists])

    const el = <Select style={{ width: '100%' }} defaultValue={playlistsLocal[0]?.name}>
        {playlists.map((e, key) => {
            // 替换为AntD官方的Option子组件
            return <Select.Option key={key} value={e.value}>{e.name}</Select.Option>
        })}
    </Select>
    console.log('playlistsLocal ', playlistsLocal)
    return el
}

export default PlaylistSelector

优化建议 #

如果没有其他需要操作本地playlistsLocal的逻辑，完全可以去掉这个本地状态，直接使用全局的playlists即可，全局状态变化会自动触发组件重渲染，直接取playlists[0]?.name作为默认值就能满足需求，省去同步成本。

内容的提问来源于stack exchange，提问作者Cristian Sfetcu