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

第一个无效。并且它是无效的，因为useState的状态是持久的，并且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

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

首先，据我了解，您的情况是在redux和本地状态之间建立关系，那么第二个是唯一的选择。如果您只想设置默认值，则根本不需要使用useEffect。

我应该将useSelector传递给useState吗

1 个答案: