我应该将 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

第一个无效。并且它是无效的，因为来自useState 的状态是持久的，并且在useState 中设置的参数是 default 值，这意味着 - 它只会在第一个安装组件时设置时间。因此更改 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。