如果语句进入useEffect钩子- ReactJs

Question

我正在检查我的代码，我发现自从我开始使用react钩子，我有一些“问题”，我不能说，但它不够干净。所以基本上我想清理一下我对这个问题的看法。我想在useEffect和setSomething()中使用一个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])

结论是，我希望减少useEffect中的useEffect表达式，但它似乎不起作用。有人能帮我一把告诉我我做错了什么吗？

Answer 1

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

setState希望得到一个回调，这样就不能工作了。但是，您可以通过使用if-语句传入回调来实现所需的结果：

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

  return somethingElse
})