javascript - 三元运算符 - React 的条件渲染中是否存在可能的错误?
问题描述
目前,我正在使用 Node.js 和 React 进行开发,遇到了一个奇怪的问题,我不确定我是否遗漏了某些东西,或者它是否是 React 方面的错误。
我想要做的是使用三元运算符来呈现条件 HTML,如下所示:
...
{
missingTradingSystemNameError
?
<div>
...
</div>
:
duplicateTradingSystemNameError
?
<div>
...
</div>
:
null
}
...
这两个三元运算符条件都是我的 JSX.Element 函数中的状态变量。但是,这样做会导致以下形式的多个错误:
错误:
React Hook "React.useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render
有趣的是,如果我添加第三个(无用的)嵌套条件代替null,那么一切都按预期工作:
...
{
missingTradingSystemNameError
?
<div>
...
</div>
:
duplicateTradingSystemNameError
?
<div>
...
</div>
:
<<condition3>>
?
null
:
null
}
...
condition3是第三个有状态变量,但正如您所见,附加条件什么也不做,因此应该可以省略它。这是一个 React 错误还是我在这里遗漏了一些重要的东西?
(PS:请原谅我的代码不寻常的缩进,但对我来说,这是目前更复杂的 JSX 代码块最易读的解决方案)
编辑1:
为了提供一些进一步要求的细节,这里是我简化的 useEffect() 代码块:
const [missingTradingSystemNameError, setMissingTradingSystemNameError] = React.useState(false);
const [duplicateTradingSystemNameError, setDuplicateTradingSystemNameError] = React.useState(false);
...
React.useEffect(() => {
if (props.tradingSystemDialog && resetTradingSystemDialogOnNextOpen) {
...
setMissingTradingSystemNameError(false);
setDuplicateTradingSystemNameError(false);
...
}
}, [
props.tradingSystemDialog,
resetTradingSystemDialogOnNextOpen,
tickFields,
consolidatedFields
]);
missingTradingSystemNameError是通过setMissingTradingSystemNameError设置的,而duplicateTradingSystemNameError是通过setDuplicateTradingSystemNameError设置的。如您所见,这些有状态变量可能在 useState() 中被更改,但它们不在 useState() 的依赖项中。
解决方案
Providing a minimal reproducible example would be the best, but the context is too complex in my case. However, what I did is to remove more and more code to examine if one small part is causing the issue. Now I came to the conclusion that the following code snippet at some other location in the file is problematic and causes the mentioned code to fail or at least behave in a strange way:
...
{
basicShortSettingsError
?
<div className={classes.error}>
<ErrorOutline
className={classes.errorIcon}
/>
<Typography className={classes.sectionError} variant="body2">
{
parseFloat(positionSizeShort) > parseFloat(maxContractsShort)
?
"Position size > maximum contracts"
:
"Set position size and maximum contracts"
}
</Typography>
</div>
:
null
}
...
For some reason, the conditional part inside the Typography tag worked before but is now causing errors if I extend the code at some other point in the file by the content which I mentioned in the question.
To clarify, this is the code snippet causing problems:
<Typography className={classes.sectionError} variant="body2">
{
parseFloat(positionSizeShort) > parseFloat(maxContractsShort)
?
"Position size > maximum contracts"
:
"Set position size and maximum contracts"
}
</Typography>
positionSizeShort and maxContractsShort are also stateful variables and I am not sure why the code was working just fine before and is now failing, but at least I have found the problem's root now where I can probably do a workaround.
If anyone has a better idea why exactly this code is problematic, it is more than welcomed to share your thoughts here as I have no real answer for my issue.
推荐阅读
- postgresql - 跟踪源表中的更改并加载到历史表
- python - 映射值的更快方法 - 熊猫
- c++ - 非类型模板参数的自定义推导指南
- sql - BigQuery 正则表达式从字符串中删除/替换文本列表
- android - Kotlin vararg:用于一个简单的函数,它返回一些垃圾
- html - 无法使用 lbrack;在 Angular 中,尽管它是标准的 HTML
- scala - Scala for循环计算幂和
- mongodb - MongoDB $lookup 创建数组
- azure - 如何 ping Azure DevOps 源端点?
- spring - 使用 mockito 时 @Autowire Environment null - mockmvc