我应该将 useSelector 传递给 useState

IT技术 reactjs typescript redux
2021-05-22 21:30:41

大家好，我对您更喜欢哪种方法有疑问：

在带有 TypeScript 的 React 功能组件中，使用 useSelector 从 Redux State 获取值是：1) 

 const campaign = useSelector(campaignSelector);
 const [audienceSample, setAudienceSample] = useState<number | null>((campaign || 
  {max_completes_total: null})['max_completes_total']);

来自 2) 

 const campaign = useSelector(campaignSelector);
  const [audienceSample, setAudienceSample] = useState<number | null>(null);
  useEffect(() => {
    setAudienceSample(campaign.max_completes_total)
     },[campaign])

我知道 1 是更少的代码，但你认为它更快吗，你更喜欢哪一个，谢谢你们

1个回答

第一个无效。并且它是无效的，因为状态 fromuseState是持久的，并且设置的参数useState是默认值，它的意思是 - 只有在第一次安装组件时才会设置它。所以更改 redux 状态和给定的新值useSelector不会影响本地状态，它会一直指示原始默认值。

回答你的问题 - 答案不是我喜欢什么，而是什么有效，第二个才是正确的。但是，我在这里提出的从代码角度来看的最佳解决方案是将两者合并一点，以避免将 null 设置为默认值并在useState. 考虑以下代码：

const campaign = useSelector(campaignSelector);
const [audienceSample, setAudienceSample] = useState(campaign?.max_completes_total); // set campaign as default

useEffect(() => {
   setAudienceSample(campaign?.max_completes_total)
},[campaign]) // set the relation between redux campaign and local state

此外，如您所见，我使用了可选链来简化代码。本地状态的类型将自动推断为number | undefined。

最重要的是，据我所知，您的情况是在 redux 和本地状态之间建立关系，然后第二个是唯一的选择。如果您打算仅设置默认值，则useEffect根本不需要使用。

其它你可能感兴趣的问题
上一篇如果图层预览不显示，为什么支持打印在外壳上？ 下一篇靠近窗户的层移