一个帮助合并 state 的自定义 hook` 大家看看有啥问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 1057 天前的主题，其中的信息可能已经有所发展或是发生改变。

 import { useCallback, useState } from 'react'; const getType = (value) => { const type = Object.prototype.toString.call(value); if (type === '[object Object]') { return 'isObject' } else if (type === '[object Array]') { return 'isArray' } return typeof value; } const useMerge = (initialState) => { const [state, setState] = useState(initialState); const stateType = getType(initialState); const handleMerge = useCallback((handleObject = {}) => { const { id, type, value } = handleObject; const merge = (state) => { let mergeData = {}; if (stateType === 'isObject') { mergeData = { ...state, ...value } } if (stateType === 'isArray') { if (type === 'remove') { mergeData = state.filter((item) => { return item.id !== id }) } if (type === 'add') { mergeData = [...state, value]; } if (type === 'update') { mergeData = state.map((item) => { if (item.id === id) { return { ...item, ...value } } return item; }) } } return mergeData; } setState((prevState) => merge(prevState)) }, []) return [state, handleMerge]; } export default useMerge;

12 条回复 2022-11-21 17:31:52 +08:00

cutemurphy2888

2022-11-20 21:30:21 +08:00

const [list, setList] = useMerge([{ id: 1, text: 'aa' }, { id: 2, text: 'bb' }]);

const changeTT = () => {
setList({
type: 'update',
id: 2,
value: {
text: 'dxx'
}
})
}

nulIptr

2022-11-20 22:07:27 +08:00

没注释不知道干啥用的，没 type 懒得看
merge 函数可以拿到外面

cnhongwei

2022-11-20 22:55:35 +08:00

直接用展开运算符或 filter + 展开运行不就行了。

kid740246048

2022-11-20 23:01:28 +08:00

state 类的自定义 hook ，返回的 set 方法最好支持传入函数，参考 react 的这个类型

type SetStateAction<S> = S | ((prevState: S) => S);

一些场景下使用时可以避免把 state 本身加到依赖数组

nbhaohao

2022-11-21 09:00:20 +08:00

个人感觉这种需求没有不要单独一个 hook, handleMerge 是一个 util 方法, 其他地方如果需要这种 merge 的操作, 自行调用 merge 即可.
```
const [list, setList] = useState([{ id: 1, text: 'aa' }, { id: 2, text: 'bb' }]);

const changeTT = () => {
setList(merge(, list{
type: 'update',
id: 2,
value: {
tex: 'dxx'
}
}))
}
```

nbhaohao

2022-11-21 09:01:02 +08:00

@nbhaohao
没有不要 -> 没有必要.
merge(, list -> merge(list,