时间戳

首页 > 解决方案 > 如何在页面刷新时使用 useSelector

javascript - 如何在页面刷新时使用 useSelector

问题描述

我的功能组件中有以下代码。

const { id } = useParams();  
const categories = useSelector((state) => {
     const allCategories = state.allCategories;
     return allCategories.filter(cat => cat.id === id); 
}); 
const [code, setCode] = useState(categories.length === 1 ? categories[0].code : '');

但是，此代码仅正确运行一次。然后，如果我刷新页面，它就不起作用。请帮我解决这个问题。另外，如果这违反了最佳实践，请告诉我正确的方法。实际用例是，有一个类别表，用户单击“编辑类别”，然后我导航到该组件以显示当前数据（即：类别代码）。由于类别表已经有数据，所以填充了 allCategories

在此处输入图像描述

在此处输入图像描述

标签： javascriptreactjsredux

解决方案

因为数据在程序的其他地方发生了更改，所以将其用作默认状态值是有问题的......而不是将值与useEffect()

const { id } = useParams();  
const categories = useSelector((state) => {
     const allCategories = state.allCategories;
     return allCategories.filter(cat => cat.id === id); 
}); 
const [code, setCode] = useState(''); 
useEffect(()=>{
    if(categories.length === 1)
        setCode(categories[0].code)
},[categories.length&&categories[0].?code])

categories[0].code注意：无论何时更改，代码都会像这样设置...

推荐阅读