我想用自定义hook实现两组间之间共享某一个业务逻辑。
我现在有一个自定义hook:useDetailItems
,和两个组件:DetailContent
、NumberPad
,hook内会创建一个state:items
,并返回state以及相关操作方法,然后NumberPad
是DetailContent
的下三级级组件(不是直接父子关系),NumberPad
新增items数组项,而DetailContent
展示items
以下是相关代码:
import {useEffect, useState} from "react";
import generateUID from "../lib/generateUID";
export type Item = {
id: string,
iconId: string,
iconName: string,
output: string,
remark: string,
type: 'spend' | 'income'
}
const useDetailItems = () => {
const [items, setItems] = useState<Item[]>([])
// initial items
useEffect(() => {
const localDetailItems = JSON.parse(localStorage.getItem('detailItems') || '[]')
console.log(`set state`, localDetailItems)
setItems(localDetailItems)
}, [])
useEffect(() => {
console.log(`set storage`, items)
localStorage.setItem('detailItems', JSON.stringify(items))
}, [items])
const addItem = (item: Item) => {
setItems([...items, {...item, id: generateUID()}])
}
return {items, addItem}
}
export {useDetailItems}
...
import {useDetailItems} from "../../../../hooks/useDetailItems";
const DetailContent = () => {
const {items} = useDetailItems() // 使用自定义hook取得items数据
return (
<Wrapper>
<div className="item-wrapper">
{items.map(item => {
return <DetailItem item={item} key={item.id}/>
})}
</div>
</Wrapper>
)
}
export default DetailContent
const NumberPad = ()=> {
const {addItem} = useDetailItems() // 使用自定义hook取得增加items的操作方法
...
const finish = (e: React.MouseEvent) => {
// 增加items!!
addItem({id: '', iconId: state.selectedIcon.id, iconName: state.selectedIcon.name, output, remark: input, type})
}
return (
...
)
}
export default NumberPad
我知道DetailContent
和NumberPad
他们的不会共享state,所以打算将他们的items都依赖同一个localstorage数据上。
然后现在的问题是:DetailContent
和NumberPad
处于同一路由,所以NumberPad
即使改变了数据并且数据存储在localstorage上之后,即使我手动触发DetailContent
重新渲染,也不能重新创建state,所以在DetailContent
中压根就不会重新走一遍hook。
react小白,我目前只能想到让DetailContent
重新挂载一遍以达到重新创建state的目的,有什么方法可以实现吗?
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…