If 语句进入 useEffect 钩子 - ReactJs答案

【问题标题】：If statement into useEffect hooks - ReactJsIf 语句进入 useEffect 钩子 - ReactJs
【发布时间】：2020-10-23 23:08:26
【问题描述】：

我正在审查我的代码，我发现自从我开始使用 react hooks 以来，我遇到了一些我不能说的“问题”，但它不够干净。所以基本上我想清理一下我对这个问题的处理方法。我想在 useEffect 和 setSomething() 内部使用 if 语句。所以基本上我想显示一条关于状态条件的消息。

当前：

const [displayFeedbackMessage, setDisplayFeedbackMessage ] = useState(undefined);

...

useEffect(() => {

        setDisplayFeedbackMessage(
            <div>
            {
                displaySelectionResult &&
                selected > 0 &&
                <div className={classes.dnaTableFeedbackMessageDiv}>
                   <b>{Pluralize("document", selected, true)}</b>
                    {" "}selected out of{" "}
                    <b>{Pluralize("document", available, true)}</b>
                    {" "}available.
                </div>
            }

            {
                displayActionResult &&
                <div className={classes.dnaTableFeedbackMessageDiv}>
                    <b>{Pluralize("document", actioned, true)}</b>
                    {" "} downloaded out of{" "}
                    <b>{Pluralize("document", requested, true)}</b>
                    {" "}requested.
                </div>
            }
            </div>
        )

},[selected, displaySelectionResult, displayActionResult])

...

return (

               <Paper>{displayFeedbackMessage}</Paper>
)

它工作正常，没有任何问题。但是当我尝试这样切换它时：

期望：

useEffect(() => {

        setDisplayFeedbackMessage(
            if(displaySelectionResult && selected > 0) {
              <b>{Pluralize("document", selected, true)}</b>
              {" "}selected out of{" "}
              <b>{Pluralize("document", available, true)}</b>
              {" "}available.

        } else if (displayActionResult) {
              <b>{Pluralize("document", actioned, true)}</b>
              {" "} downloaded out of{" "}
              <b>{Pluralize("document", requested, true)}</b>
              {" "}requested.
      }
)
},[selected, displaySelectionResult, displayActionResult])

结论是我想减少 useEffect 内部的 jsx 表达式，但它似乎不起作用。有人可以帮我看看我做错了什么吗？

【问题讨论】：

if-else 语句在 JSX 中不起作用。这是因为 JSX 只是函数调用和对象构造的语法糖。
也许您可以将这两个 JSX 设置为两个不同的变量，然后将其与条件一起使用？也将条件放在setDisplayFeedbackMessage 之外。您可能需要在这些 JSX 块周围使用 Fragment
我不会将 JSX 存储在状态中，只是将所需的数据存储在状态中并根据该状态返回，这使它更具可读性，实际上正如上面的评论你需要将 JSX 包装成这样的片段：{your JSX}>

标签： reactjs react-hooks jsx use-effect

【解决方案1】：

这与useEffect 挂钩无关。问题是您直接在 setState 值中创建了 if 语句。

setState 需要回调，所以这不起作用。不过，您可以通过使用 if 语句传入回调来实现所需的结果：

setState(() => {
  if (condition) {
    return something;
  }

  return somethingElse
})

【讨论】：

其实你是对的，我太愚蠢了，我错过了return 声明。当它被添加时，它就像一个魅力。谢谢朋友！
很高兴我能帮上忙 ;)