目前，我正在使用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错误还是我在这里遗漏了一些关键的东西？
(附言：请原谅我代码的不寻常缩进，但对我来说，这是目前对更复杂的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通过setMissingTradingSystemName错误设置，duplicateTradingSystemNameErrorsetDuplicateTraingSystemNameError设置。正如您所看到的，这些有状态变量在useState((中可能会发生更改，但它们不在useStates((的依赖项中。
提供一个最小的可复制示例是最好的，但在我的情况下，上下文太复杂了。然而，我所做的是删除越来越多的代码，以检查是否是一个小部分导致了问题。现在我得出的结论是，文件中其他位置的以下代码片段存在问题，并导致上述代码失败或至少以奇怪的方式运行：
...
{
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
}
...
出于某种原因，Typhography标记中的条件部分以前工作过，但如果我在文件中的其他位置用问题中提到的内容扩展代码，现在会导致错误。
为了澄清，这是导致问题的代码片段：
<Typography className={classes.sectionError} variant="body2">
{
parseFloat(positionSizeShort) > parseFloat(maxContractsShort)
?
"Position size > maximum contracts"
:
"Set position size and maximum contracts"
}
</Typography>
positionSizeShort和 maxContractsShort如果有人更清楚为什么这个代码有问题，我们非常欢迎在这里分享你的想法，因为我对我的问题没有真正的答案。