如何使用 useEffect 进行渲染？

Posted 2023-03-17

【中文标题】如何使用 useEffect 进行渲染？

【英文标题】：How can I render with 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 ？我应该在我的上下文中做一些不同的事情吗？

【参考方案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>