Блог

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

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

  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 amp;amp; <FeedbackClickOnThumbs />)}

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

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

Внутри FeedbackClickOnThumbs и FeedbackUserInputsMsg я использую setFeedbackResult для изменения состояния обратной связи, а затем изменяю то, что отображается в представлении обратной связи.

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

Эффект использования никогда не вызывайте по возвращении. Просто используйте if внутри вот так:

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

...

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