我应该将 useSelector 传递给 useState

Question

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

在带有 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 代码更少，但你认为它更快吗？你更喜欢哪一个，谢谢你们

Answer 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根本不需要使用。