反应使我们验证初始值条件

问题描述 投票:0回答:2
这给了我一个错误: React Hook“ React.usestate”有条件地调用。必须在每个组件渲染中以完全相同的顺序调用React钩子。

因此,我决定使用使用效率来更新我的代码:

const Calculate({data}) => {
  const [number, setNumber] = useState(0);

  useEffect(() => {
     if (data === 'end') {
       setNumber(5)
     }
   }, []);
} 

无论我不需要,我宁愿不将状态设置为零。

我可以通过使初始值有条件地解决吗?

const Calculate({data}) => { const [number, setNumber] = useState(data === 'end' ? 5 : 0); return (...) }

对此有任何副作用吗?为什么这项工作而不是我最初的尝试?

您可以在您的钩子内使用三元,它可以正常工作。但是,最好以以下方式将其包裹在功能表达式中:

useState

在设置初始状态时,将仅评估上述代码段中的函数表达式。将您的三元运算符包裹在函数表达式中。

提起,您想使用昂贵的计算的结果来设置初始状态,在这种情况下,您可以将其包装在函数表达式中:
javascript reactjs react-hooks
2个回答
14
投票
const [number, setNumber] = useState(() => data === 'end' ? 5 : 0)

这更好,因为
data === 'end' ? 5 : 0

将返回一个函数,该函数只能在初始渲染期间进行一次评估。而如果您不包装
const [number, setNumber] = useState(() => expensiveFunction())
在函数表达式内部,则每次组件渲染并阻止代码执行时,都会对其进行评估,直到返回值。

这种方法也称为

() => expensiveFunction()

.

对此有任何副作用吗?为什么这会起作用而不是我的
原始尝试?

没有没有副作用,这是您处境的方法。在您的情况下它不起作用,因为您违反了钩子的规则之一:
没有在循环,条件或嵌套功能中调用钩子。
相反,始终在您的React功能的顶级使用钩子,
在任何提早回报之前。通过遵守此规则,您可以确保
每次组件呈现时,钩子都以相同的顺序调用。
这就是允许正确保留钩子状态的原因
在多个usestate和使用效率调用之间。 (如果您很好奇,
我们将在下面深入解释这一点。)

在本质上,您的

expensiveFunction

呼叫themy自己被包裹在一个条件下,这是一个问题。您的新方法不再是这种情况。


如果数据可以改变...。 您唯一需要确保处理的事情是,传递的数据不是

3
投票
,而是
Lazy initialization

如果不存在。

您应该在依赖阵列中具有
useState

以在任何更改时重新启用组件。

null

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.