如何使用 useEffect 进行渲染？

Question

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

因此，为了获得用户的投票并决定必须显示的内容，我首先创建了一个上下文

 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？我应该根据自己的情况做些不同的事情吗？

Answer 1

UseEffect 从不调用 return。像这样在里面使用 if:

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

...

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

如何使用 useEffect 进行渲染？

How can I render with useEffect?

reactjs

use-effect

use-context