Question

我正在查看我的代码，我发现自从我开始使用react钩子以来，我已经说了一些“问题”，但是还不够干净。因此，基本上，我想稍微解决一下这个问题。我想在if内部和useEffect内部使用setSomething()语句。因此，基本上，关于状态条件，我想显示一条消息。

当前：

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])

结论是我想在我的jsx内缩小useEffect表达式，但似乎不起作用。有人可以帮我一下，告诉我我做错了什么吗？

Answer 1

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

setState需要回调，因此无法正常工作。您可以通过以下方式传递带有if语句的回调来获得所需的结果：

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

  return somethingElse
})

如果对useEffect挂钩的if语句-ReactJs

1 个答案: