如何使用 useEffect 进行渲染？答案

【问题标题】：How can I render with useEffect?如何使用 useEffect 进行渲染？
【发布时间】：2021-10-12 18:58:04
【问题描述】：

好吧，我想做一个反馈部分，系统会在其中询问帖子是否对用户有帮助，用户可以投票给“是的，它对我有帮助！”或“不，它对我没有帮助”。如果他的投票结果为“不，它没有帮助我”，他必须说明它没有帮助的原因并发送。如果他只是投票给“是的，这对我有帮助！”该部分将显示“感谢您的反馈”消息。在他发送“否”票的原因后也会发生同样的情况。

所以，为了获得用户的投票并决定要显示的内容，我首先创建了一个上下文

 export const FeedbackContext = createContext({});

export function FeedbackContextProvider({ children }) {
//at this point the section is waiting for a click in one of the two options 
  const [feedbackResult, setFeedbackResult] = useState("waiting for feedback");

  return (
    <FeedbackContext.Provider value={{ feedbackResult, setFeedbackResult }}>
      {children}
    </FeedbackContext.Provider>
  );
}

然后我在反馈视图中使用它，这是一个容器，将根据用户的反馈显示不同的消息

export default function Feedback() {
  const { feedbackResult } = useContext(FeedbackContext);

  return (
    <Animation.Bounce in={true}>
      <section>
        <FeedbackContextProvider>
          {feedbackResult === "waiting for feedback" ||
            (feedbackResult === undefined && <FeedbackClickOnThumbs />)}

          {feedbackResult === "thumbs-up" && <FeedbackThanksMsg />}

          {feedbackResult === "thumbs-down" && <FeedbackUserInputsMsg />}
        </FeedbackContextProvider>
      </section>
    </Animation.Bounce>
  );
}

在 FeedbackClickOnThumbs 和 FeedbackUserInputsMsg 中，我使用 setFeedbackResult 更改 feedbackResult 状态，然后更改反馈视图中显示的内容。

问题是我实际上卡在了这个视图中，因为当状态改变时它没有渲染其他组件，我已经尝试使用 useEffect 如上所示

 export default function Feedback() {
  const { feedbackResult } = useContext(FeedbackContext);

  return (
    <Animation.Bounce in={true}>
      <section>
        <FeedbackContextProvider>
          {useEffect(() => {
            if (
              feedbackResult === "waiting for feedback" ||
              feedbackResult === undefined
            ) 
            {
              return <FeedbackClickOnThumbs />;
            } 
            else if (feedbackResult === "thumbs-up") 
            {
              return <FeedbackThanksMsg />;
            } 
            else 
            {
              <FeedbackUserInputsMsg />;
            }
          })}
        </FeedbackContextProvider>
      </section>
    </Animation.Bounce>
  );
}

但它也没有工作......我是否以错误的方式使用 useEffect ？我应该在我的上下文中做一些不同的事情吗？

【问题讨论】：

标签： reactjs use-effect use-context

【解决方案1】：

UseEffect 永远不会在返回时调用。只需像这样在里面使用if：

const rederBody = () => {
  if (
    feedbackResult === "waiting for feedback" ||
    feedbackResult === undefined
  ) {
    return <FeedbackClickOnThumbs />;
  } else if (feedbackResult === "thumbs-up") {
    return <FeedbackThanksMsg />;
  } else {
    <FeedbackUserInputsMsg />;
  }
};

...

<FeedbackContextProvider>
  {rederBody()}
</FeedbackContextProvider>

【讨论】：