Проблема с useEffect () при загрузке страницы - PullRequest
Новая
       1

Проблема с useEffect () при загрузке страницы

1 голос
/ 17 июня 2020

У меня проблемы с приложением для ответов на вопросы. Далее следует описание: Это из приложения. js файл: 

...
const [createQuiz, setCreateQuiz] = useState(false);
...
useEffect(()=> {
    const reRender = () => {
        setCreateQuiz(true)
    }
    window.onload=function(){
      document.getElementById("myBtn").addEventListener("click", reRender);
    } 
    // return document.getElementById("myBtn").removeEventListener("click", reRender);
  }, [createQuiz])

return (
    <QuizContextProvider>
      {
      (createQuiz) ? (
        <div>Form</div>
      ) : (
        <div>
        <Modal/>
        <Question question={questions[questionNumber]} next={goToTheNext} />
        </div>
      )
      }
      {console.log(createQuiz)}
    </QuizContextProvider>
  );
}

Как видно, это условный рендеринг: модальное окно спрашивает пользователя, хотят ли они пройти существующий тест или создать их собственные, и когда пользователь нажимает кнопку «Создать свой», приложение должно повторно выполнить рендеринг снова, на этот раз useEffect () (в App. js) устанавливает значение createQuiz равным true. фрагмент кода, приведенный ниже, взят из компонента <Modal />: 

return (
        <div className='benclosing' style={{display:displayValue}}>
        <div className='modal'>
            <h1>Welcome!</h1>
            <p>Do you want to take an existing quiz or create your own?</p>
            <button onClick={hideWindow} >Existing quiz</button>
            <button id='myBtn'>Create your own</button>
        </div>
        </div>
    )
}

Все работает нормально, как ожидалось, за исключением 1: всякий раз, когда щелкают значок перезагрузки, моя страница повторно отображается снова, и пользователя снова спрашивают если они хотят пройти существующую викторину. Я хочу, чтобы это освежение ни на что не влияло. Я застрял с этой проблемой. Как добиться желаемого результата?

Я тоже пробовал это: 

  const reRender = () => {
    setCreateQuiz(true)
  }

  useEffect(()=> {
    reRender()
    //return setCreateQuiz(false)

  }, [createQuiz])

Это не сработало, как ожидалось. Я описал, что это вызвало, во втором комментарии Red Baron, пожалуйста, посмотрите.

1 Ответ

1 голос
/ 17 июня 2020

Правильный способ добиться желаемого - создать внутри компонента App обработчик событий, который установит createQuiz на true при нажатии кнопки Create your own внутри компонента Modal. 


function App() {
  const [createQuiz, setCreateQuiz] = React.useState(false);

  const handleShowQuizForm = () => {
    setCreateQuiz(true);
  };

  return (
    <div>
      {createQuiz ? (
        <div>Form</div>
      ) : (
        <>
          <Modal showQuizForm={handleShowQuizForm} />
        </>
      )}
    </div>
  );
}

function Modal(props) {
  return (
    <div>
      <button type="button" onClick={props.showQuizForm}>
        Create your own
      </button>
    </div>
  );
}

Вот пример:

Здесь нет необходимости в хуке useEffect и window.onload событие подразумевает для меня, что вы хотите установить createQuiz на true, затем «refre sh» своей страницы и ожидать, что createQuiz теперь будет true - это не будет работать так.

Кроме того, способ использования хука useEffect может быть проблематичным: c - вам следует избегать обновления части state внутри хука useEffect, который также является частью dependency array: 

React.useEffect(() => {
  const reRender = () => {
    setCreateQuiz(true);
  }
  // although not an issue here, but if this hook was
  // rewritten and looked like the following, it would
  // case an infinite re-render and eventually crash your app
  setCreateQuiz(!createQuiz);
}, [createQuiz]);
...