Как я могу визуализировать с помощью useEffect?

Question

Ну, я хочу сделать раздел обратной связи, в котором система спрашивает, помог ли пост пользователю, и пользователь может проголосовать "Да, это помогло мне!" или «Нет, мне это не помогло». Если его голос будет "Нет, мне это не помогло", он должен указать причину, по которой это не помогло, и отправить ее. Если он просто проголосует за "Да, это помогло мне!" в разделе появится сообщение «Спасибо за отзыв». То же самое происходит после того, как он отправит причину голосования «против».

Итак, чтобы получить голос пользователя и решить, что нужно показывать, я сначала создал контекст

 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, а затем изменить то, что отображается в представлении Feedback.

Вопрос в том, что я на самом деле застрял в этом представлении, потому что оно не отображает другой компонент при изменении состояния, я пытался использовать 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? Должен ли я сделать что-то другое в моем контексте?

Как я могу визуализировать с помощью useEffect?

Ответы (1)