reactjs - 我应该将 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 |未定义。

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