在react中重新加载页面时重置子组件值

Question

当我重新加载页面时，usestate变为null，但我希望当我重新载入页面时，所有div都显示在那里。我使用本地存储，但当我重新加载时，它也变为空代码：-

const [item, setItem] = useState([]);
const handleClick = (val, id) => {

localStorage.setItem('ChannelName', val)
setActiveIndex(val);
let text = val;
let index = id;

setItem(prev => {
if (prev.some(({ index }) => (id === index))) return prev;
else {
// console.log("prev",prev);
return [...prev, { val: text, index: index }];
}
});
};
return(
<div className="allDivs">
{item && item.map((items, index) => {
return (
<div key={index} >
<TabHeader item={items}  itemList={item} />

</div>
)
})}
</div>

)当我点击RundownListdiv出现但重新加载页面时，我再次从点击rundown list 开始

当用户重新加载时，div是否也会出现/useState而不会变为空

Answer 1

您需要确保有一个带有空依赖项列表的useEffect，当组件加载时，它会检查本地存储中是否有内容。如果有的话，就用它。

如果本地存储已存在，则不会签入此代码。

useEffect(() => {
function checkUserData() {
const item = localStorage.getItem('userData')
if (item) {
setUserData(item)
}
}
window.addEventListener('storage', checkUserData)
return () => {
window.removeEventListener('storage', checkUserData)
}
}, [])

参考：

useEffect不侦听本地存储